chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 4 Wiki Activity

Control the focus when clicking the "CW" button. (#7776)

Browse source 
* Focus to the spoiler text when CW turns on.
* Focus back to the textarea when CW turns off.
This commit is contained in:
kedama 2018-06-10 23:13:30 +09:00 committed by Eugen Rochko
parent 268d90e810
commit a99179d31f
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/javascript/mastodon/features/compose/components/compose_form.js
View file

@ -128,12 +128,24 @@ export default class ComposeForm extends ImmutablePureComponent {
} else if(prevProps.is_submitting && !this.props.is_submitting) { } else if(prevProps.is_submitting && !this.props.is_submitting) {
this.autosuggestTextarea.textarea.focus(); this.autosuggestTextarea.textarea.focus();
} }
if (this.props.spoiler !== prevProps.spoiler) {
if (this.props.spoiler) {
this.spoilerText.focus();
} else {
this.autosuggestTextarea.textarea.focus();
}
}
} }
setAutosuggestTextarea = (c) => { setAutosuggestTextarea = (c) => {
this.autosuggestTextarea = c; this.autosuggestTextarea = c;
} }
setSpoilerText = (c) => {
this.spoilerText = c;
}
handleEmojiPick = (data) => { handleEmojiPick = (data) => {
const { text } = this.props; const { text } = this.props;
const position = this.autosuggestTextarea.textarea.selectionStart; const position = this.autosuggestTextarea.textarea.selectionStart;
@ -164,7 +176,7 @@ export default class ComposeForm extends ImmutablePureComponent {
<div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}> <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}>
<label> <label>
<span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span> <span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span>
<input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input' id='cw-spoiler-input' /> <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input' id='cw-spoiler-input' ref={this.setSpoilerText} />
</label> </label>
</div> </div>