fix composer jump by reseting lastToken on click and arrow up and down in autosuggesttextarea

app/soapbox/components/autosuggest_textarea.js

@@ -50,6 +50,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     autoFocus: PropTypes.bool,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
+    clickableAreaRef: PropTypes.object,
   };
 
   static defaultProps = {
@@ -107,6 +108,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
       if (suggestions.size > 0 && !suggestionsHidden) {
         e.preventDefault();
         this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
+      } else {
+        this.setState({ lastToken: null });
       }
 
       break;
@@ -114,6 +117,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
       if (suggestions.size > 0 && !suggestionsHidden) {
         e.preventDefault();
         this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
+      } else {
+        this.setState({ lastToken: null });
       }
 
       break;
@@ -159,6 +164,28 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     this.textarea.focus();
   }
 
+  getClickableArea = () => {
+    const { clickableAreaRef } = this.props;
+    return clickableAreaRef ? clickableAreaRef.current : this.form;
+  }
+
+  isClickInside = (e) => {
+    return [
+      this.getClickableArea(),
+      document.querySelector('.autosuggest-textarea__textarea'),
+    ].some(element => element && element.contains(e.target));
+  }
+
+  handleClick = (e) => {
+    if (this.isClickInside(e)) {
+      this.setState({ lastToken: null });
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleClick, true);
+  }
+
   componentDidUpdate(prevProps, prevState) {
     const { suggestions } = this.props;
     if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) {