From 0b7763e7267108b7ef70713b6ecbf9c85c952d48 Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Sun, 27 Sep 2020 15:43:23 -0500
Subject: [PATCH] fix composer jump by reseting lastToken on click and arrow up
 and down in autosuggesttextarea

---
 .../components/autosuggest_textarea.js        | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js
index d9a044022..e60661f6b 100644
--- a/app/soapbox/components/autosuggest_textarea.js
+++ b/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) {