diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js index d9a044022..f3274c6a2 100644 --- a/app/soapbox/components/autosuggest_textarea.js +++ b/app/soapbox/components/autosuggest_textarea.js @@ -159,6 +159,16 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { this.textarea.focus(); } + shouldComponentUpdate(nextProps, nextState) { + // Skip updating when lastToken changes so the cursor doesn't jump around + // due to re-rendering unnecessarily + if (this.state.lastToken !== nextState.lastToken) { + return false; + } else { + return super.shouldComponentUpdate(nextProps, nextState); + } + } + componentDidUpdate(prevProps, prevState) { const { suggestions } = this.props; if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) { diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js index af8ce4263..0f3f45f41 100644 --- a/app/soapbox/features/compose/components/compose_form.js +++ b/app/soapbox/features/compose/components/compose_form.js @@ -160,11 +160,6 @@ class ComposeForm extends ImmutablePureComponent { this.props.onChangeSpoilerText(e.target.value); } - doFocus = () => { - if (!this.autosuggestTextarea) return; - this.autosuggestTextarea.textarea.focus(); - } - setCursor = (start, end = start) => { if (!this.autosuggestTextarea) return; this.autosuggestTextarea.textarea.setSelectionRange(start, end); @@ -219,8 +214,22 @@ class ComposeForm extends ImmutablePureComponent { } } + maybeUpdateCursor = prevProps => { + const shouldUpdate = [ + // Autosuggest has been updated and + // the cursor position explicitly set + this.props.focusDate !== prevProps.focusDate, + typeof this.props.caretPosition === 'number', + ].every(Boolean); + + if (shouldUpdate) { + this.setCursor(this.props.caretPosition); + } + } + componentDidUpdate(prevProps) { this.maybeUpdateFocus(prevProps); + this.maybeUpdateCursor(prevProps); } render() {