cw-autofocust.js.diff

diff --git a/app/javascript/mastodon/components/collapsable.js b/app/javascript/mastodon/components/collapsable.js
index d5d43118..d5eed740 100644
--- a/app/javascript/mastodon/components/collapsable.js
+++ b/app/javascript/mastodon/components/collapsable.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 const Collapsable = ({ fullHeight, isVisible, children }) => (
   <Motion defaultStyle={{ opacity: !isVisible ? 0 : 100, height: isVisible ? fullHeight : 0 }} style={{ opacity: spring(!isVisible ? 0 : 100), height: spring(!isVisible ? 0 : fullHeight) }}>
     {({ opacity, height }) => (
-      <div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 ? 'none' : 'block' }}>
+      <div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 && !isVisible ? 'none' : 'block' }}>
         {children}
       </div>
     )}
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index 663ccfb8..f397e0ee 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -102,6 +102,12 @@ export default class ComposeForm extends ImmutablePureComponent {
     }
   }

+  handleClickSpoilerButton = () => {
+    if(!this.props.spoiler) {
+      requestAnimationFrame(()=>this.spoilerInput.focus())
+    }
+  }
+
   componentDidUpdate (prevProps) {
     // This statement does several things:
     // - If we're beginning a reply, and,
@@ -163,7 +169,7 @@ export default class ComposeForm extends ImmutablePureComponent {
           <div className='spoiler-input'>
             <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={c=>this.spoilerInput=c}/>
             </label>
           </div>
         </Collapsable>
@@ -198,7 +204,9 @@ export default class ComposeForm extends ImmutablePureComponent {
             <UploadButtonContainer />
             <PrivacyDropdownContainer />
             <SensitiveButtonContainer />
-            <SpoilerButtonContainer />
+            <SpoilerButtonContainer
+             onClick={this.handleClickSpoilerButton}
+           />
           </div>
           <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
         </div>
diff --git a/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js b/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js
index 0b9dc8df..80017ae2 100644
--- a/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js
+++ b/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js
@@ -15,10 +15,11 @@ const mapStateToProps = (state, { intl }) => ({
   ariaControls: 'cw-spoiler-input',
 });

-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch, props) => ({

   onClick () {
     dispatch(changeComposeSpoilerness());
+    props.onClick();
   },

 });