Merge pull request #313 from cibernox/bugfix_select_with_enter_when_n…

…o_search

Pressing enter on single select without search correctly chooses the highlighted option

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Master
 
+- [BUGFIX] Pressing enter in a select without searchbox correctly selects the highlighted element
+
 # 0.9.0-beta.1
 - [FEATURE] Proper Accesibility!! Lots of roles and `aria-*` tags have been added to make the component
   friendly, according with the guidelines in [the RFC](https://github.com/cibernox/ember-power-select/issues/293)

addon/components/power-select-multiple/trigger.js

@@ -56,8 +56,11 @@ export default Ember.Component.extend({
 
       let selected = Ember.A((this.get('selected') || []));
       if (e.keyCode === 13 && select.isOpen && highlighted !== undefined) {
+        e.stopPropagation();
         if (selected.indexOf(highlighted) === -1) {
           select.actions.choose(buildNewSelection([highlighted, selected], { multiple: true }), e);
+        } else {
+          select.actions.close(e);
         }
       } else if (e.keyCode === 8 && isBlank(e.target.value)) {
         let lastSelection = get(selected, 'lastObject');

addon/components/power-select.js

@@ -173,6 +173,8 @@ export default Ember.Component.extend({
         } else {
           dropdown.actions.open(e);
         }
+      } else if (dropdown.isOpen && e.keyCode === 13) {  // ENTER
+        this.send('choose', dropdown, this.get('highlighted'), e);
       } else if (e.keyCode === 9 || e.keyCode === 27) {  // Tab or ESC
         dropdown.actions.close(e);
       }

tests/integration/components/power-select/keyboard-control-test.js

@@ -98,6 +98,30 @@ test('Pressing ENTER selects the highlighted element, closes the dropdown and fo
   assert.ok($('.ember-power-select-trigger').get(0) === document.activeElement, 'The trigger is focused');
 });
 
+test('Pressing ENTER on a single select with search disabled selects the highlighted element, closes the dropdown and focuses the trigger', function(assert) {
+  assert.expect(5);
+
+  this.numbers = numbers;
+  this.changed = (val, dropdown) => {
+    assert.equal(val, 'two', 'The onchange action is triggered with the selected value');
+    this.set('selected', val);
+    assert.ok(dropdown.actions.close, 'The action receives the dropdown as second argument');
+  };
+
+  this.render(hbs`
+    {{#power-select searchEnabled=false options=numbers selected=selected onchange=(action changed) as |option|}}
+      {{option}}
+    {{/power-select}}
+  `);
+
+  clickTrigger();
+  triggerKeydown($('.ember-power-select-trigger')[0], 40);
+  triggerKeydown($('.ember-power-select-trigger')[0], 13);
+  assert.equal($('.ember-power-select-trigger').text().trim(), 'two', 'The highlighted element was selected');
+  assert.equal($('.ember-power-select-dropdown').length, 0, 'The dropdown is closed');
+  assert.ok($('.ember-power-select-trigger').get(0) === document.activeElement, 'The trigger is focused');
+});
+
 test('Pressing ENTER when there is no highlighted element, closes the dropdown and focuses the trigger without calling the onchange function', function(assert) {
   assert.expect(3);
   this.numbers = numbers;