Merge pull request #1452 from cibernox/prevent-multiple-select-search…

…-input-from-submitting-wrapper-form

Prevent the input of the searchbox from submitting the wrapper form.

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}}

tests/dummy/app/templates/playground.hbs

@@ -10,3 +10,13 @@
   {{user.name}}
 </PowerSelect>
 
+<h3>Multiple select inside a form</h3>
+<form action="/nonexistent">
+  <PowerSelectMultiple
+    @options={{this.cities}}
+    @selected={{this.chosenCities}}
+    @onChange={{fn (mut this.chosenCities)}}
+    @searchEnabled={{true}} as |city|>
+    {{city}}
+  </PowerSelectMultiple>
+</form>

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`
+      <PowerSelectMultiple @options={{this.numbers}} @selected={{foo}} @onChange={{action (mut foo)}} @searchEnabled={{true}} as |option|>
+        {{option}}
+      </PowerSelectMultiple>
+    `);
+
+    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);