Merge branch 'fix-composer-jump2' into 'develop'

Fix composer issues

Closes #200 and #419

See merge request soapbox-pub/soapbox-fe!260

app/soapbox/components/autosuggest_textarea.js

@@ -50,6 +50,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     autoFocus: PropTypes.bool,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
+    clickableAreaRef: PropTypes.object,
+    getClickableArea: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -107,6 +109,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 +118,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 +165,27 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     this.textarea.focus();
   }
 
+  isClickInside = (e) => {
+    return [
+      this.props.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);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClick, true);
+  }
+
   componentDidUpdate(prevProps, prevState) {
     const { suggestions } = this.props;
     if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) {

app/soapbox/features/compose/components/compose_form.js

@@ -286,6 +286,7 @@ class ComposeForm extends ImmutablePureComponent {
           onSuggestionSelected={this.onSuggestionSelected}
           onPaste={onPaste}
           autoFocus={shouldAutoFocus}
+          getClickableArea={this.getClickableArea}
         >
           {
             !condensed &&

app/soapbox/features/compose/containers/privacy_dropdown_container.js

@@ -17,7 +17,10 @@ const mapDispatchToProps = dispatch => ({
 
   isUserTouching,
   onModalOpen: props => dispatch(openModal('ACTIONS', props)),
-  onModalClose: () => dispatch(closeModal()),
+  onModalClose: () => {
+    dispatch(closeModal());
+    dispatch(openModal('COMPOSE'));
+  },
 
 });