diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js index ced1d3deb80..73ba8bed099 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js @@ -418,5 +418,33 @@ discourseModule( ); }, }); + + componentTest("name", { + template: hbs`{{single-select value=value content=content}}`, + + beforeEach() { + this.setProperties({ + content: [{ id: 1, name: "john" }], + value: null, + }); + }, + + async test(assert) { + assert.equal( + this.subject.header().el()[0].getAttribute("name"), + I18n.t("select_kit.select_to_filter") + ); + + await this.subject.expand(); + await this.subject.selectRowByValue(1); + + assert.equal( + this.subject.header().el()[0].getAttribute("name"), + I18n.t("select_kit.filter_by", { + name: this.content.firstObject.name, + }) + ); + }, + }); } ); diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/single-select-header.js b/app/assets/javascripts/select-kit/addon/components/select-kit/single-select-header.js index 749a370a1e7..cef8d0cc7ec 100644 --- a/app/assets/javascripts/select-kit/addon/components/select-kit/single-select-header.js +++ b/app/assets/javascripts/select-kit/addon/components/select-kit/single-select-header.js @@ -1,11 +1,23 @@ +import { computed } from "@ember/object"; import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header"; import UtilsMixin from "select-kit/mixins/utils"; import layout from "select-kit/templates/components/select-kit/single-select-header"; +import I18n from "I18n"; export default SelectKitHeaderComponent.extend(UtilsMixin, { layout, classNames: ["single-select-header"], - attributeBindings: ["role"], + attributeBindings: ["role", "name"], role: "combobox", + + name: computed("selectedContent.name", function () { + if (this.selectedContent) { + return I18n.t("select_kit.filter_by", { + name: this.selectedContent.name, + }); + } else { + return I18n.t("select_kit.select_to_filter"); + } + }), }); diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index fe9db3425d3..08974637f23 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1829,6 +1829,8 @@ en: other: "+ %{count} subcategories" select_kit: + filter_by: "Filter by: %{name}" + select_to_filter: "Select a value to filter" default_header_text: Select... no_content: No matches found filter_placeholder: Search...