DEV: allows select-kit to prevent autofocus of header after onChange (#9718)

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

@@ -12,6 +12,7 @@
               options=(hash
                 popupTitle=b.title
                 icon=b.icon
+                focusAfterOnchange=false
               )
             }}
           {{else}}

app/assets/javascripts/select-kit/components/select-kit.js

@@ -269,7 +269,8 @@ export default Component.extend(
       filterComponent: "select-kit/select-kit-filter",
       selectedNameComponent: "selected-name",
       castInteger: false,
-      preventsClickPropagation: false
+      preventsClickPropagation: false,
+      focusAfterOnchange: true
     },
 
     autoFilterable: computed("content.[]", "selectKit.filter", function() {
@@ -428,10 +429,12 @@ export default Component.extend(
             this.selectKit.close();
           }
 
-          this._safeAfterRender(() => {
-            this._focusFilter();
-            this.popper && this.popper.update();
-          });
+          if (this.selectKit.options.focusAfterOnchange) {
+            this._safeAfterRender(() => {
+              this._focusFilter();
+              this.popper && this.popper.update();
+            });
+          }
         }
       });
     },

test/javascripts/components/select-kit/single-select-test.js

@@ -257,3 +257,41 @@ componentTest("prevents propagating click event on header", {
     assert.equal(this.value, DEFAULT_VALUE);
   }
 });
+
+componentTest("focusAfterOnChange", {
+  template:
+    "{{d-button class='focus-me'}}{{single-select options=(hash focusAfterOnchange=focusAfterOnchange) value=value content=content onChange=onChange}}",
+
+  beforeEach() {
+    this.setProperties({
+      onChange: () => {
+        find(".focus-me").focus();
+        this.set("value", "foo");
+      },
+      content: DEFAULT_CONTENT,
+      value: DEFAULT_VALUE
+    });
+  },
+
+  async test(assert) {
+    this.set("focusAfterOnchange", true);
+
+    await this.subject.expand();
+    await this.subject.selectRowByIndex(0);
+
+    assert.ok(
+      document.activeElement.classList.contains("single-select-header"),
+      "it selects the header"
+    );
+
+    this.set("focusAfterOnchange", false);
+
+    await this.subject.expand();
+    await this.subject.selectRowByIndex(0);
+
+    assert.notOk(
+      document.activeElement.classList.contains("single-select-header"),
+      "it doesn’t select the header"
+    );
+  }
+});