Add a small "type to search" instruction to the top of the emoji popup

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}

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) {

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 {