diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js index 36d2773de1..2a051705dd 100644 --- 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 index 828c76d3f0..58e4d4d2ea 100644 --- 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().simulate('click') dropdownMenuIsOpen() @@ -1087,6 +1087,33 @@ describe('Dropdown', () => { domEvent.keyDown(document, { key: 'Enter' }) dropdownMenuIsClosed() }) + it('closes the menu on SPACE key', () => { + wrapperMount().simulate('click') + + dropdownMenuIsOpen() + + // choose an item closes + domEvent.keyDown(document, { key: 'Spacebar' }) + dropdownMenuIsClosed() + }) + it('closes the Search menu on ENTER key', () => { + wrapperMount().simulate('click') + + dropdownMenuIsOpen() + + // choose an item closes + domEvent.keyDown(document, { key: 'Enter' }) + dropdownMenuIsClosed() + }) + it('does not close the Search menu on SPACE key', () => { + wrapperMount().simulate('click') + + dropdownMenuIsOpen() + + // choose an item closes + domEvent.keyDown(document, { key: 'Spacebar' }) + dropdownMenuIsOpen() + }) it('keeps value of the searchQuery when selection is changed', () => { wrapperMount()