about summary refs log tree commit diff
diff options
context:
space:
mode:
authorkedama <kedama@foresdon.jp>2018-06-10 23:13:30 +0900
committerEugen Rochko <eugen@zeonfederated.com>2018-06-10 16:13:30 +0200
commita99179d31ff0013987f362ffe15cb3450b29ed08 (patch)
treed9ec9b0b1e10e1bee5ae1232b9bb14ddce72d8d0
parent268d90e8103770e8b90f6d5680a466c1ec83c6ff (diff)
Control the focus when clicking the "CW" button. (#7776)
* Focus to the spoiler text when CW turns on.
* Focus back to the textarea when CW turns off.
-rw-r--r--app/javascript/mastodon/features/compose/components/compose_form.js14
1 files changed, 13 insertions, 1 deletions
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index 60485e3c6..83f2f4d34 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -128,12 +128,24 @@ export default class ComposeForm extends ImmutablePureComponent {
     } else if(prevProps.is_submitting && !this.props.is_submitting) {
       this.autosuggestTextarea.textarea.focus();
     }
+
+    if (this.props.spoiler !== prevProps.spoiler) {
+      if (this.props.spoiler) {
+        this.spoilerText.focus();
+      } else {
+        this.autosuggestTextarea.textarea.focus();
+      }
+    }
   }
 
   setAutosuggestTextarea = (c) => {
     this.autosuggestTextarea = c;
   }
 
+  setSpoilerText = (c) => {
+    this.spoilerText = c;
+  }
+
   handleEmojiPick = (data) => {
     const { text }     = this.props;
     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' : ''}`}>
           <label>
             <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>
         </div>