diff --git a/app/assets/javascripts/discourse/components/select-box.js.es6 b/app/assets/javascripts/discourse/components/select-box.js.es6 index fa160ddc1bd..961210f688a 100644 --- a/app/assets/javascripts/discourse/components/select-box.js.es6 +++ b/app/assets/javascripts/discourse/components/select-box.js.es6 @@ -17,6 +17,7 @@ export default Ember.Component.extend({ caretUpIcon: "caret-up", caretDownIcon: "caret-down", headerText: null, + dynamicHeaderText: true, icon: null, value: null, @@ -145,7 +146,7 @@ export default Ember.Component.extend({ } }, - @observes("content.[]") + @observes("content.[]", "value") @on("didReceiveAttrs") _contentChanged: function() { if (!Ember.isNone(this.get("value"))) { @@ -157,8 +158,10 @@ export default Ember.Component.extend({ this.set("filteredContent", this._remapContent(this.get("content"))); this._setSelectedContent(this.get("content")); - if (Ember.isNone(this.get("headerText"))) { - this.set("headerText", this.get("selectedContent.text")); + if (this.get("dynamicHeaderText") === true) { + if (!Ember.isNone(this.get("selectedContent.text"))) { + this.set("headerText", this.get("selectedContent.text")); + } } }, diff --git a/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6 b/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6 index 3021f1b58b9..af7ac645744 100644 --- a/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6 +++ b/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6 @@ -6,6 +6,8 @@ export default SelectBoxComponent.extend({ headerText: I18n.t("topic.controls"), + dynamicHeaderText: false, + maxCollectionHeight: 300, init() { diff --git a/test/javascripts/components/select-box-test.js.es6 b/test/javascripts/components/select-box-test.js.es6 index 874a6a79473..ccf9fd05682 100644 --- a/test/javascripts/components/select-box-test.js.es6 +++ b/test/javascripts/components/select-box-test.js.es6 @@ -272,3 +272,44 @@ componentTest('supports converting select value to integer', { }); } }); + +componentTest('dynamic headerText', { + template: '{{select-box value=1 content=content}}', + + beforeEach() { + this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]); + }, + + test(assert) { + click(".select-box-header"); + andThen(() => { + assert.equal(find(".select-box-header .current-selection").html().trim(), "robin"); + }); + + click(".select-box-row[title='regis']"); + andThen(() => { + assert.equal(find(".select-box-header .current-selection").html().trim(), "regis", "it changes header text"); + }); + } +}); + +componentTest('static headerText', { + template: '{{select-box value=1 content=content dynamicHeaderText=false headerText=headerText}}', + + beforeEach() { + this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]); + this.set("headerText", "Choose..."); + }, + + test(assert) { + click(".select-box-header"); + andThen(() => { + assert.equal(find(".select-box-header .current-selection").html().trim(), "Choose..."); + }); + + click(".select-box-row[title='regis']"); + andThen(() => { + assert.equal(find(".select-box-header .current-selection").html().trim(), "Choose...", "it doesn’t change header text"); + }); + } +});