diff --git a/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs index f48dc424ac4..10b4eb61427 100644 --- a/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs +++ b/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}} diff --git a/app/assets/javascripts/select-kit/components/select-kit.js b/app/assets/javascripts/select-kit/components/select-kit.js index 74544c91f1e..4ac3ed3d0ec 100644 --- a/app/assets/javascripts/select-kit/components/select-kit.js +++ b/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(); + }); + } } }); }, diff --git a/test/javascripts/components/select-kit/single-select-test.js b/test/javascripts/components/select-kit/single-select-test.js index 66bd9403284..a360429488b 100644 --- a/test/javascripts/components/select-kit/single-select-test.js +++ b/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" + ); + } +});