updated logic for hiding picker and also added ability to hide suggestions with

esc key

1 files changed, 45 insertions, 15 deletions

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index c74c531b..6dc006f8 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -78,6 +78,7 @@ const EmojiInput = {
       focused: false,
       blurTimeout: null,
       showPicker: false,
+      temporarilyHideSuggestions: false,
       spamMode: false,
       disableClickOutside: false
     }
@@ -102,7 +103,11 @@ const EmojiInput = {
         }))
     },
     showSuggestions () {
-      return this.focused && this.suggestions && this.suggestions.length > 0 && !this.showPicker
+      return this.focused &&
+        this.suggestions &&
+        this.suggestions.length > 0 &&
+        !this.showPicker &&
+        !this.temporarilyHideSuggestions
     },
     textAtCaret () {
       return (this.wordAtCaret || {}).word || ''
@@ -153,6 +158,7 @@ const EmojiInput = {
       }, 0)
     },
     togglePicker () {
+      this.input.elm.focus()
       this.showPicker = !this.showPicker
     },
     replace (replacement) {
@@ -250,44 +256,68 @@ const EmojiInput = {
       this.focused = true
       this.setCaret(e)
       this.resize()
+      this.temporarilyHideSuggestions = false
     },
     onKeyUp (e) {
+      const { key } = e
       this.setCaret(e)
       this.resize()
+
+      // Setting hider in keyUp to prevent suggestions from blinking
+      // when moving away from suggested spot
+      if (key === 'Escape') {
+        this.temporarilyHideSuggestions = true
+      } else {
+        this.temporarilyHideSuggestions = false
+      }
     },
     onPaste (e) {
       this.setCaret(e)
       this.resize()
     },
     onKeyDown (e) {
-      this.setCaret(e)
-      this.resize()
-
       const { ctrlKey, shiftKey, key } = e
-      if (key === 'Tab') {
-        if (shiftKey) {
+      // Disable suggestions hotkeys if suggestions are hidden
+      if (!this.temporarilyHideSuggestions) {
+        if (key === 'Tab') {
+          if (shiftKey) {
+            this.cycleBackward(e)
+          } else {
+            this.cycleForward(e)
+          }
+        }
+        if (key === 'ArrowUp') {
           this.cycleBackward(e)
-        } else {
+        } else if (key === 'ArrowDown') {
           this.cycleForward(e)
         }
+        if (key === 'Enter') {
+          if (!ctrlKey) {
+            this.replaceText(e)
+          }
+        }
       }
-      if (key === 'ArrowUp') {
-        this.cycleBackward(e)
-      } else if (key === 'ArrowDown') {
-        this.cycleForward(e)
-      }
-      if (key === 'Enter') {
-        if (!ctrlKey) {
-          this.replaceText(e)
+      // Probably add optional keyboard controls for emoji picker?
+
+      // Escape hides suggestions, if suggestions are hidden it
+      // de-focuses the element (i.e. default browser behavior)
+      if (key === 'Escape') {
+        if (!this.temporarilyHideSuggestions) {
+          this.input.elm.focus()
         }
       }
+
+      this.showPicker = false
+      this.resize()
     },
     onInput (e) {
       this.showPicker = false
       this.setCaret(e)
+      this.resize()
       this.$emit('input', e.target.value)
     },
     onCompositionUpdate (e) {
+      this.showPicker = false
       this.setCaret(e)
       this.resize()
       this.$emit('input', e.target.value)