Add option to not close select on tab keypress

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

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

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.
       </td>
     </tr>
+    <tr>
+      <td>closeOnTab</td>
+      <td><code>boolean</code></td>
+      <td>
+        Defaults to true. When false, the component won't be closed if the user hits the "Tab" key
+        when the dropdown is open.
+      </td>
+    </tr>
     <tr>
       <td>defaultHighlighted</td>
       <td><code>any or function</code></td>

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