feat(Dropdown): allow selecting an item when pressing the spacebar (#…

…3702) Due to accessibility matters (and similarity to the native <select>), this adds the possibility to select an item via Spacebar and not only with Enter
Semantic-Org · Aug 7, 2019 · 9bcc76a · 9bcc76a
1 parent f595fc2
commit 9bcc76a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -579,7 +579,11 @@ export default class Dropdown extends Component {
     debug('selectItemOnEnter()', keyboardKey.getKey(e))
     const { search } = this.props
 
-    if (keyboardKey.getCode(e) !== keyboardKey.Enter) return
+    if (
+      keyboardKey.getCode(e) !== keyboardKey.Enter &&
+      keyboardKey.getCode(e) !== keyboardKey.Spacebar
+    )
+      return
     e.preventDefault()
 
     const optionSize = _.size(this.getMenuOptions())

diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -1058,6 +1058,26 @@ describe('Dropdown', () => {
         .at(1)
         .should.have.props({ selected: true, active: true })
     })
+    it('becomes active on spacebar when open', () => {
+      wrapperMount(<Dropdown options={options} selection />)
+      wrapper.simulate('click')
+
+      // initial item props
+      wrapper
+        .find('DropdownItem')
+        .at(1)
+        .should.have.props({ selected: false, active: false })
+
+      // select and make active
+      domEvent.keyDown(document, { key: 'ArrowDown' })
+      domEvent.keyDown(document, { key: 'Spacebar' })
+      wrapper.update()
+
+      wrapper
+        .find('DropdownItem')
+        .at(1)
+        .should.have.props({ selected: true, active: true })
+    })
     it('closes the menu', () => {
       wrapperMount(<Dropdown options={options} selection />).simulate('click')