diff --git a/addon/components/power-select.js b/addon/components/power-select.js index d3509fdef..95fe0a2fb 100644 --- a/addon/components/power-select.js +++ b/addon/components/power-select.js @@ -84,6 +84,7 @@ export default Component.extend({ noMatchesMessage: fallbackIfUndefined('No results found'), searchMessage: fallbackIfUndefined('Type to search'), closeOnSelect: fallbackIfUndefined(true), + closeOnTab: fallbackIfUndefined(true), defaultHighlighted: fallbackIfUndefined(defaultHighlighted), typeAheadMatcher: fallbackIfUndefined(defaultTypeAheadMatcher), highlightOnHover: fallbackIfUndefined(true), @@ -669,7 +670,9 @@ export default Component.extend({ }, _handleKeyTab(e) { - this.get('publicAPI').actions.close(e); + if (this.get('closeOnTab')) { + this.get('publicAPI').actions.close(e); + } }, _handleKeyESC(e) { diff --git a/addon/templates/components/power-select-multiple.hbs b/addon/templates/components/power-select-multiple.hbs index 015191c47..860aa815f 100644 --- a/addon/templates/components/power-select-multiple.hbs +++ b/addon/templates/components/power-select-multiple.hbs @@ -13,6 +13,7 @@ calculatePosition=calculatePosition class=class closeOnSelect=closeOnSelect + closeOnTab=closeOnTab defaultHighlighted=defaultHighlighted destination=destination dir=dir @@ -77,6 +78,7 @@ calculatePosition=calculatePosition class=class closeOnSelect=closeOnSelect + closeOnTab=closeOnTab defaultHighlighted=defaultHighlighted destination=destination dir=dir diff --git a/tests/dummy/app/templates/public-pages/docs/api-reference.hbs b/tests/dummy/app/templates/public-pages/docs/api-reference.hbs index a20d9f3ac..aa49ec1cd 100644 --- a/tests/dummy/app/templates/public-pages/docs/api-reference.hbs +++ b/tests/dummy/app/templates/public-pages/docs/api-reference.hbs @@ -80,6 +80,14 @@ an option, either with the mouse/keyboard or using the `choose` action in the publicAPI. + + closeOnTab + boolean + + Defaults to true. When false, the component won't be closed if the user hits the "Tab" key + when the dropdown is open. + + defaultHighlighted any or function diff --git a/tests/integration/components/power-select/keyboard-control-test.js b/tests/integration/components/power-select/keyboard-control-test.js index 6be3ff66c..9b59f021a 100644 --- a/tests/integration/components/power-select/keyboard-control-test.js +++ b/tests/integration/components/power-select/keyboard-control-test.js @@ -189,7 +189,7 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi assert.dom('.ember-power-select-trigger').isFocused('The trigger is focused'); }); - test('Pressing TAB closes the select WITHOUT selecting the highlighed element and focuses the trigger', async function(assert) { + test('If closeOnTab=true, pressing TAB closes the select WITHOUT selecting the highlighted element and focuses the trigger', async function(assert) { assert.expect(3); this.numbers = numbers; @@ -204,7 +204,25 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 9); assert.dom('.ember-power-select-trigger').hasText('', 'The highlighted element wasn\'t selected'); assert.dom('.ember-power-select-dropdown').doesNotExist('The dropdown is closed'); - assert.dom('.ember-power-select-trigger').isFocused('The trigges is focused'); + assert.dom('.ember-power-select-trigger').isFocused('The trigger is focused'); + }); + + test('If closeOnTab=false, pressing TAB does not close the select, select the highlighted element, or focus the trigger', async function(assert) { + assert.expect(3); + + this.numbers = numbers; + await render(hbs` + {{#power-select closeOnTab=false options=numbers onchange=(action (mut foo)) as |option|}} + {{option}} + {{/power-select}} + `); + + await clickTrigger(); + await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); + await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 9); + assert.dom('.ember-power-select-trigger').hasText('', 'The highlighted element wasn\'t selected'); + assert.dom('.ember-power-select-dropdown').exists('The dropdown is open'); + assert.dom('.ember-power-select-trigger').isNotFocused('The trigger is not focused'); }); test('The component is focusable using the TAB key as any other kind of input', async function(assert) {