From afa19cd60de28456ee55db7c44954551ab30949b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 24 Jul 2018 13:48:05 +0100
Subject: [PATCH] make clicking autocomplete suggestions work again

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_Autocomplete.scss             |  3 ++-
 src/components/views/rooms/Autocomplete.js         |  9 ++++-----
 src/components/views/rooms/MessageComposerInput.js | 10 +++++++++-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss
index 732ada088b..3e1016f60d 100644
--- a/res/css/views/rooms/_Autocomplete.scss
+++ b/res/css/views/rooms/_Autocomplete.scss
@@ -69,7 +69,8 @@
     flex-flow: wrap;
 }
 
-.mx_Autocomplete_Completion.selected {
+.mx_Autocomplete_Completion.selected,
+.mx_Autocomplete_Completion:hover {
     background: $menu-bg-color;
     outline: none;
 }
diff --git a/src/components/views/rooms/Autocomplete.js b/src/components/views/rooms/Autocomplete.js
index 4bc91b5c2b..ee6cc66d2d 100644
--- a/src/components/views/rooms/Autocomplete.js
+++ b/src/components/views/rooms/Autocomplete.js
@@ -216,12 +216,12 @@ export default class Autocomplete extends React.Component {
         return done.promise;
     }
 
-    onCompletionClicked(): boolean {
-        if (this.countCompletions() === 0 || this.state.selectionOffset === COMPOSER_SELECTED) {
+    onCompletionClicked(selectionOffset: number): boolean {
+        if (this.countCompletions() === 0 || selectionOffset === COMPOSER_SELECTED) {
             return false;
         }
 
-        this.props.onConfirm(this.state.completionList[this.state.selectionOffset - 1]);
+        this.props.onConfirm(this.state.completionList[selectionOffset - 1]);
         this.hide();
 
         return true;
@@ -264,8 +264,7 @@ export default class Autocomplete extends React.Component {
                 position++;
 
                 const onClick = () => {
-                    this.setSelection(componentPosition);
-                    this.onCompletionClicked();
+                    this.onCompletionClicked(componentPosition);
                 };
 
                 return React.cloneElement(completion.component, {
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index c117bce6a2..9cdb926a68 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -1301,6 +1301,14 @@ export default class MessageComposerInput extends React.Component {
         await this.setDisplayedCompletion(null); // restore originalEditorState
     };
 
+    onAutocompleteConfirm = (displayedCompletion: ?Completion) => {
+        this.focusComposer();
+        // XXX: this fails if the composer isn't focused so focus it and delay the completion until next tick
+        setImmediate(() => {
+            this.setDisplayedCompletion(displayedCompletion);
+        });
+    };
+
     /* If passed null, restores the original editor content from state.originalEditorState.
      * If passed a non-null displayedCompletion, modifies state.originalEditorState to compute new state.editorState.
      */
@@ -1563,7 +1571,7 @@ export default class MessageComposerInput extends React.Component {
                     <Autocomplete
                         ref={(e) => this.autocomplete = e}
                         room={this.props.room}
-                        onConfirm={this.setDisplayedCompletion}
+                        onConfirm={this.onAutocompleteConfirm}
                         onSelectionChange={this.setDisplayedCompletion}
                         query={ this.suppressAutoComplete ? '' : this.getAutocompleteQuery(activeEditorState) }
                         selection={this.getSelectionRange(activeEditorState)}