diff --git a/addon/components/power-select-multiple/trigger.hbs b/addon/components/power-select-multiple/trigger.hbs index 6cfb56843..ed2e7609a 100644 --- a/addon/components/power-select-multiple/trigger.hbs +++ b/addon/components/power-select-multiple/trigger.hbs @@ -41,6 +41,7 @@ placeholder={{this.maybePlaceholder}} disabled={{@select.disabled}} tabindex={{@tabindex}} + form="power-select-fake-form" {{on "focus" @onFocus}} {{on "blur" @onBlur}} {{on "input" this.handleInput}} diff --git a/tests/dummy/app/templates/playground.hbs b/tests/dummy/app/templates/playground.hbs index 729f8f1cd..2144df258 100644 --- a/tests/dummy/app/templates/playground.hbs +++ b/tests/dummy/app/templates/playground.hbs @@ -10,3 +10,13 @@ {{user.name}} +

Multiple select inside a form

+
+ + {{city}} + +
\ No newline at end of file diff --git a/tests/integration/components/power-select/multiple-test.js b/tests/integration/components/power-select/multiple-test.js index dc435fea9..0b505300d 100644 --- a/tests/integration/components/power-select/multiple-test.js +++ b/tests/integration/components/power-select/multiple-test.js @@ -43,6 +43,21 @@ module('Integration | Component | Ember Power Select (Multiple)', function(hooks assert.dom('.ember-power-select-dropdown input').doesNotExist(); }); + test('The searchbox of multiple selects has type="search" and a form attribute to prevent submitting the wrapper form when pressing enter', async function(assert) { + assert.expect(2); + + this.numbers = numbers; + await render(hbs` + + {{option}} + + `); + + await clickTrigger(); + assert.dom('.ember-power-select-trigger input').hasAttribute('type', 'search'); + assert.dom('.ember-power-select-trigger input').hasAttribute('form'); + }); + test('When the select opens, the search input (if any) in the trigger gets the focus', async function(assert) { assert.expect(1);