From d78168d407fed7f178f222f981c3c68bb20e1bf7 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 5 Jul 2017 18:14:22 +0100
Subject: [PATCH] Add visual feedback for when there are no completions
 available

Attempts to kep parity with old composer by using the same #faa colour but uses an animation instead of a js timeout.

Fixes https://github.com/vector-im/riot-web/issues/4490
---
 src/components/views/rooms/Autocomplete.js         |  2 +-
 src/components/views/rooms/MessageComposerInput.js | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/Autocomplete.js b/src/components/views/rooms/Autocomplete.js
index dd6d9d1ae9..30de7fb07d 100644
--- a/src/components/views/rooms/Autocomplete.js
+++ b/src/components/views/rooms/Autocomplete.js
@@ -177,7 +177,7 @@ export default class Autocomplete extends React.Component {
             hide: false,
         }, () => {
             this.complete(this.props.query, this.props.selection).then(() => {
-                done.resolve();
+                done.resolve(this.countCompletions());
             });
         });
         return done.promise;
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 818c108211..ee3b566a7f 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -138,6 +138,9 @@ export default class MessageComposerInput extends React.Component {
             // the virtual state "above" the history stack, the message currently being composed that
             // we want to persist whilst browsing history
             currentlyComposedEditorState: null,
+
+            // whether there were any completions
+            someCompletions: null,
         };
 
         // bit of a hack, but we need to do this here since createEditorState needs isRichtextEnabled
@@ -706,10 +709,16 @@ export default class MessageComposerInput extends React.Component {
     };
 
     onTab = async (e) => {
+        this.setState({
+            someCompletions: null,
+        });
         e.preventDefault();
         if (this.autocomplete.state.completionList.length === 0) {
             // Force completions to show for the text currently entered
-            await this.autocomplete.forceComplete();
+            const completionCount = await this.autocomplete.forceComplete();
+            this.setState({
+                someCompletions: completionCount > 0,
+            });
             // Select the first item by moving "down"
             await this.moveAutocompleteSelection(false);
         } else {
@@ -830,6 +839,7 @@ export default class MessageComposerInput extends React.Component {
 
         const className = classNames('mx_MessageComposer_input', {
             mx_MessageComposer_input_empty: hidePlaceholder,
+            mx_MessageComposer_input_error: this.state.someCompletions === false,
         });
 
         const content = activeEditorState.getCurrentContent();