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.
This commit is contained in:
		
							parent
							
								
									268d90e810
								
							
						
					
					
						commit
						a99179d31f
					
				| 
						 | 
					@ -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>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue