diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d203d36b..5e48ebe15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,6 @@ # Master +- [ENHANCEMENT] Providing a custom `placeholderComponent` is available for + `power-select-multiple` too now. # 1.5.0-beta.0 - [ENHANCEMENT/BREAKING-ISH] `ember-basic-dropdown` has improved the experience with A11y diff --git a/addon/templates/components/power-select-multiple.hbs b/addon/templates/components/power-select-multiple.hbs index adccfe66d..94118e01e 100644 --- a/addon/templates/components/power-select-multiple.hbs +++ b/addon/templates/components/power-select-multiple.hbs @@ -32,6 +32,7 @@ options=options optionsComponent=optionsComponent placeholder=placeholder + placeholderComponent=placeholderComponent registerAPI=(readonly registerAPI) renderInPlace=renderInPlace required=required @@ -86,6 +87,7 @@ options=options optionsComponent=optionsComponent placeholder=placeholder + placeholderComponent=placeholderComponent registerAPI=(readonly registerAPI) renderInPlace=renderInPlace required=required diff --git a/addon/templates/components/power-select-multiple/trigger.hbs b/addon/templates/components/power-select-multiple/trigger.hbs index 83db5d03b..8f8f142db 100644 --- a/addon/templates/components/power-select-multiple/trigger.hbs +++ b/addon/templates/components/power-select-multiple/trigger.hbs @@ -16,8 +16,8 @@ {{/if}} {{else}} - {{#if (and placeholder (not searchEnabled))}} - {{placeholder}} + {{#if (not searchEnabled)}} + {{component placeholderComponent placeholder=placeholder}} {{/if}} {{/each}} {{#if searchEnabled}} diff --git a/tests/integration/components/power-select/multiple-test.js b/tests/integration/components/power-select/multiple-test.js index 0c71fa1f0..059e39743 100644 --- a/tests/integration/components/power-select/multiple-test.js +++ b/tests/integration/components/power-select/multiple-test.js @@ -809,4 +809,28 @@ test('If the options of a multiple select implement `isEqual`, that option is us assert.equal($('.ember-power-select-option:eq(0)').attr('aria-selected'), 'true', 'The item in the list is marked as selected'); nativeMouseUp('.ember-power-select-option:eq(0)'); // select the same user again should remove it assert.equal(this.$('.ember-power-select-multiple-option').length, 0); -}); \ No newline at end of file +}); + +test('placeholder can be customized using placeholderComponent', function(assert) { + assert.expect(2); + + this.countries = countries; + + this.render(hbs` + {{#power-select-multiple + options=countries + placeholder="test" + searchEnabled=false + placeholderComponent="custom-placeholder" + onchange=(action (mut foo)) as |country|}} + {{country.name}} + {{/power-select-multiple}} + `); + + assert.equal($('.ember-power-select-placeholder').length, 1, 'The placeholder appears.'); + assert.equal( + $('.ember-power-select-placeholder').text().trim(), + 'This is a very bold placeholder', + 'The placeholder content is equal.' + ); +});