From b3d0dd3aa9d52d4a5cbce9d903ffeab395187c42 Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Mon, 12 Nov 2018 17:25:02 +1030
Subject: [PATCH] Add a small "type to search" instruction to the top of the
 emoji popup

---
 extensions/emoji/js/src/forum/addComposerAutocomplete.js  | 2 +-
 .../emoji/js/src/forum/components/AutocompleteDropdown.js | 5 +++--
 extensions/emoji/less/forum.less                          | 8 ++++++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/extensions/emoji/js/src/forum/addComposerAutocomplete.js b/extensions/emoji/js/src/forum/addComposerAutocomplete.js
index b5aed4bae..55e955899 100644
--- a/extensions/emoji/js/src/forum/addComposerAutocomplete.js
+++ b/extensions/emoji/js/src/forum/addComposerAutocomplete.js
@@ -84,7 +84,7 @@ export default function addComposerAutocomplete() {
                 key={emoji}
                 onclick={() => applySuggestion(emoji)}
                 onmouseenter={function() {
-                  dropdown.setIndex($(this).parent().index());
+                  dropdown.setIndex($(this).parent().index() - 1);
                 }}>
                   <img alt={emoji} class="emoji" draggable="false" src={'//twemoji.maxcdn.com/2/72x72/' + code + '.png'}/>
                   {name}
diff --git a/extensions/emoji/js/src/forum/components/AutocompleteDropdown.js b/extensions/emoji/js/src/forum/components/AutocompleteDropdown.js
index c61af4fb3..978eff018 100644
--- a/extensions/emoji/js/src/forum/components/AutocompleteDropdown.js
+++ b/extensions/emoji/js/src/forum/components/AutocompleteDropdown.js
@@ -10,6 +10,7 @@ export default class AutocompleteDropdown extends Component {
   view() {
     return (
       <ul className="Dropdown-menu EmojiDropdown">
+        <li className="Dropdown-header" key="0">{app.translator.trans('flarum-emoji.forum.composer.type_to_search_text')}</li>
         {this.props.items.map(item => <li key={item.attrs.key}>{item}</li>)}
       </ul>
     );
@@ -36,14 +37,14 @@ export default class AutocompleteDropdown extends Component {
   }
 
   complete() {
-    this.$('li').eq(this.index).find('button').click();
+    this.$('li:not(.Dropdown-header)').eq(this.index).find('button').click();
   }
 
   setIndex(index, scrollToItem) {
     if (this.keyWasJustPressed && !scrollToItem) return;
 
     const $dropdown = this.$();
-    const $items = $dropdown.find('li');
+    const $items = $dropdown.find('li:not(.Dropdown-header)');
     let rangedIndex = index;
 
     if (rangedIndex < 0) {
diff --git a/extensions/emoji/less/forum.less b/extensions/emoji/less/forum.less
index 5d164eefd..25f5654ca 100644
--- a/extensions/emoji/less/forum.less
+++ b/extensions/emoji/less/forum.less
@@ -23,6 +23,14 @@ img.emoji {
       margin-left: -30px;
     }
   }
+
+  .Dropdown-header {
+    color: @muted-more-color;
+    text-transform: none;
+    font-weight: normal;
+    padding-bottom: 5px;
+    font-size: 11px;
+  }
 }
 
 .ComposerBody-emojiWrapper {