fix(Dropdown): closing the search menu on spacebar press (#3766)

* Fix closing the search menu on spacebar press * Update Dropdown.js
Semantic-Org · Sep 2, 2019 · a4b8757 · a4b8757
1 parent 81d3cd1
commit a4b8757
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -581,11 +581,12 @@ export default class Dropdown extends Component {
     debug('selectItemOnEnter()', keyboardKey.getKey(e))
     const { search } = this.props
 
-    if (
-      keyboardKey.getCode(e) !== keyboardKey.Enter &&
-      keyboardKey.getCode(e) !== keyboardKey.Spacebar
-    )
-      return
+    const shouldSelect =
+      keyboardKey.getCode(e) === keyboardKey.Enter ||
+      // https://github.com/Semantic-Org/Semantic-UI-React/pull/3766
+      (!search && keyboardKey.getCode(e) === keyboardKey.Spacebar)
+
+    if (!shouldSelect) 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
@@ -1078,7 +1078,7 @@ describe('Dropdown', () => {
         .at(1)
         .should.have.props({ selected: true, active: true })
     })
-    it('closes the menu', () => {
+    it('closes the menu on ENTER key', () => {
       wrapperMount(<Dropdown options={options} selection />).simulate('click')
 
       dropdownMenuIsOpen()
@@ -1087,6 +1087,33 @@ describe('Dropdown', () => {
       domEvent.keyDown(document, { key: 'Enter' })
       dropdownMenuIsClosed()
     })
+    it('closes the menu on SPACE key', () => {
+      wrapperMount(<Dropdown options={options} selection />).simulate('click')
+
+      dropdownMenuIsOpen()
+
+      // choose an item closes
+      domEvent.keyDown(document, { key: 'Spacebar' })
+      dropdownMenuIsClosed()
+    })
+    it('closes the Search menu on ENTER key', () => {
+      wrapperMount(<Dropdown options={options} selection search />).simulate('click')
+
+      dropdownMenuIsOpen()
+
+      // choose an item closes
+      domEvent.keyDown(document, { key: 'Enter' })
+      dropdownMenuIsClosed()
+    })
+    it('does not close the Search menu on SPACE key', () => {
+      wrapperMount(<Dropdown options={options} selection search />).simulate('click')
+
+      dropdownMenuIsOpen()
+
+      // choose an item closes
+      domEvent.keyDown(document, { key: 'Spacebar' })
+      dropdownMenuIsOpen()
+    })
     it('keeps value of the searchQuery when selection is changed', () => {
       wrapperMount(<Dropdown options={options} selection search />)