UX: focus on search box when emoji picker is opened (#7098)

app/assets/javascripts/discourse/components/d-editor.js.es6

@@ -378,24 +378,21 @@ export default Ember.Component.extend({
 
   _applyCategoryHashtagAutocomplete() {
     const siteSettings = this.siteSettings;
-    const self = this;
 
     this.$(".d-editor-input").autocomplete({
       template: findRawTemplate("category-tag-autocomplete"),
       key: "#",
-      afterComplete() {
-        self._focusTextArea();
-      },
-      transformComplete(obj) {
+      afterComplete: () => this._focusTextArea(),
+      transformComplete: obj => {
         return obj.text;
       },
-      dataSource(term) {
+      dataSource: term => {
         if (term.match(/\s/)) {
           return null;
         }
         return searchCategoryTag(term, siteSettings);
       },
-      triggerRule(textarea, opts) {
+      triggerRule: (textarea, opts) => {
         return categoryHashtagTriggerRule(textarea, opts);
       }
     });
@@ -406,17 +403,15 @@ export default Ember.Component.extend({
       return;
     }
 
-    const self = this;
-
     $editorInput.autocomplete({
       template: findRawTemplate("emoji-selector-autocomplete"),
       key: ":",
-      afterComplete(text) {
-        self.set("value", text);
-        self._focusTextArea();
+      afterComplete: text => {
+        this.set("value", text);
+        this._focusTextArea();
       },
 
-      onKeyUp(text, cp) {
+      onKeyUp: (text, cp) => {
         const matches = /(?:^|[^a-z])(:(?!:).?[\w-]*:?(?!:)(?:t\d?)?:?) ?$/gi.exec(
           text.substring(0, cp)
         );
@@ -426,22 +421,26 @@ export default Ember.Component.extend({
         }
       },
 
-      transformComplete(v) {
+      transformComplete: v => {
         if (v.code) {
           return `${v.code}:`;
         } else {
           $editorInput.autocomplete({ cancel: true });
-          self.set("emojiPickerIsActive", true);
+          this.set(
+            "isEditorFocused",
+            $("textarea.d-editor-input").is(":focus")
+          );
+          this.set("emojiPickerIsActive", true);
           return "";
         }
       },
 
-      dataSource(term) {
+      dataSource: term => {
         return new Ember.RSVP.Promise(resolve => {
           const full = `:${term}`;
           term = term.toLowerCase();
 
-          if (term.length < self.siteSettings.emoji_autocomplete_min_chars) {
+          if (term.length < this.siteSettings.emoji_autocomplete_min_chars) {
             return resolve([]);
           }
 
@@ -858,6 +857,7 @@ export default Ember.Component.extend({
         return;
       }
 
+      this.set("isEditorFocused", $("textarea.d-editor-input").is(":focus"));
       this.set("emojiPickerIsActive", !this.get("emojiPickerIsActive"));
     },
 

app/assets/javascripts/discourse/components/emoji-picker.js.es6

@@ -7,6 +7,7 @@ import {
   isSkinTonableEmoji,
   emojiSearch
 } from "pretty-text/emoji";
+import { safariHacksDisabled } from "discourse/lib/utilities";
 const { run } = Ember;
 
 const keyValueStore = new KeyValueStore("discourse_emojis_");
@@ -58,6 +59,12 @@ export default Ember.Component.extend({
       this._scrollTo();
       this._updateSelectedDiversity();
       this._checkVisibleSection(true);
+
+      if (
+        (!this.site.isMobileDevice || this.get("isEditorFocused")) &&
+        !safariHacksDisabled()
+      )
+        this.$filter.find("input[name='filter']").focus();
     });
   },
 

app/assets/javascripts/discourse/templates/components/d-editor.hbs

@@ -50,4 +50,4 @@
   </div>
 </div>
 
-{{emoji-picker active=emojiPickerIsActive emojiSelected=(action 'emojiSelected')}}
+{{emoji-picker active=emojiPickerIsActive isEditorFocused=isEditorFocused emojiSelected=(action 'emojiSelected')}}