Skip to content

Commit

Permalink
Prevent the input of the searchbox from submitting the wrapper form.
Browse files Browse the repository at this point in the history
  • Loading branch information
cibernox committed May 1, 2021
1 parent 9441083 commit 5600322
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 0 deletions.
1 change: 1 addition & 0 deletions addon/components/power-select-multiple/trigger.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
10 changes: 10 additions & 0 deletions tests/dummy/app/templates/playground.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
15 changes: 15 additions & 0 deletions tests/integration/components/power-select/multiple-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down

0 comments on commit 5600322

Please sign in to comment.