Merge pull request #1331 from matrix-org/luke/fix-completion-click-to-insert

Fix click to insert completion

Author: dbkr

src/components/views/rooms/Autocomplete.js

@@ -143,7 +143,6 @@ export default class Autocomplete extends React.Component {
             return null;
         }
         this.setSelection(selectionOffset);
-        return selectionOffset === COMPOSER_SELECTED ? null : this.state.completionList[selectionOffset - 1];
     }
 
     // called from MessageComposerInput
@@ -155,7 +154,6 @@ export default class Autocomplete extends React.Component {
             return null;
         }
         this.setSelection(selectionOffset);
-        return selectionOffset === COMPOSER_SELECTED ? null : this.state.completionList[selectionOffset - 1];
     }
 
     onEscape(e): boolean {
@@ -201,6 +199,9 @@ export default class Autocomplete extends React.Component {
 
     setSelection(selectionOffset: number) {
         this.setState({selectionOffset, hide: false});
+        if (this.props.onSelectionChange) {
+            this.props.onSelectionChange(this.state.completionList[selectionOffset - 1]);
+        }
     }
 
     componentDidUpdate() {

src/components/views/rooms/MessageComposerInput.js

@@ -949,8 +949,7 @@ export default class MessageComposerInput extends React.Component {
     };
 
     moveAutocompleteSelection = (up) => {
-        const completion = up ? this.autocomplete.onUpArrow() : this.autocomplete.onDownArrow();
-        return this.setDisplayedCompletion(completion);
+        up ? this.autocomplete.onUpArrow() : this.autocomplete.onDownArrow();
     };
 
     onEscape = async (e) => {
@@ -1133,6 +1132,7 @@ export default class MessageComposerInput extends React.Component {
                     <Autocomplete
                         ref={(e) => this.autocomplete = e}
                         onConfirm={this.setDisplayedCompletion}
+                        onSelectionChange={this.setDisplayedCompletion}
                         query={this.getAutocompleteQuery(content)}
                         selection={selection}/>
                 </div>