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) {