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

* Fix closing the search menu on spacebar press * Update Dropdown.js

Author: honzajerabek

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

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