From 5600322c296f015d14aecaf128dacaa5801a2091 Mon Sep 17 00:00:00 2001
From: Miguel Camba <miguel.camba@gmail.com>
Date: Sat, 1 May 2021 21:23:58 +0200
Subject: [PATCH] Prevent the input of the searchbox from submitting the
 wrapper form.

---
 .../components/power-select-multiple/trigger.hbs  |  1 +
 tests/dummy/app/templates/playground.hbs          | 10 ++++++++++
 .../components/power-select/multiple-test.js      | 15 +++++++++++++++
 3 files changed, 26 insertions(+)

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}}
 </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>
\ 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`
+      <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);