diff --git a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleCloseOnEscape.js b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleCloseOnEscape.js new file mode 100644 index 0000000000..bff4daf458 --- /dev/null +++ b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleCloseOnEscape.js @@ -0,0 +1,60 @@ +import React from 'react' +import { Dropdown } from 'semantic-ui-react' + +const friendOptions = [ + { + key: 'Jenny Hess', + text: 'Jenny Hess', + value: 'Jenny Hess', + image: { avatar: true, src: '/images/avatar/small/jenny.jpg' }, + }, + { + key: 'Elliot Fu', + text: 'Elliot Fu', + value: 'Elliot Fu', + image: { avatar: true, src: '/images/avatar/small/elliot.jpg' }, + }, + { + key: 'Stevie Feliciano', + text: 'Stevie Feliciano', + value: 'Stevie Feliciano', + image: { avatar: true, src: '/images/avatar/small/stevie.jpg' }, + }, + { + key: 'Christian', + text: 'Christian', + value: 'Christian', + image: { avatar: true, src: '/images/avatar/small/christian.jpg' }, + }, + { + key: 'Matt', + text: 'Matt', + value: 'Matt', + image: { avatar: true, src: '/images/avatar/small/matt.jpg' }, + }, + { + key: 'Justen Kitsune', + text: 'Justen Kitsune', + value: 'Justen Kitsune', + image: { avatar: true, src: '/images/avatar/small/justen.jpg' }, + }, +] + +const DropdownExampleCloseOnEscape = () => ( + + {' '} + + +) + +export default DropdownExampleCloseOnEscape diff --git a/docs/src/examples/modules/Dropdown/Usage/index.js b/docs/src/examples/modules/Dropdown/Usage/index.js index 75f15045e4..f7727c56b2 100644 --- a/docs/src/examples/modules/Dropdown/Usage/index.js +++ b/docs/src/examples/modules/Dropdown/Usage/index.js @@ -19,6 +19,12 @@ const DropdownUsageExamples = () => ( examplePath='modules/Dropdown/Usage/DropdownExampleCloseOnBlur' /> + + ( ( examplePath='modules/Dropdown/Usage/DropdownExampleSearchQuery' > - This example also shows how to override default behaviour of the search query and keep - entered value after selection. + This example also shows how to override default behaviour of the search + query and keep entered value after selection. { + if (!this.props.closeOnEscape) return if (keyboardKey.getCode(e) !== keyboardKey.Escape) return e.preventDefault() - this.close() + + debug('closeOnEscape()') + this.close(e) } moveSelectionOnKeyDown = (e) => { diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js index a5ca0ed85d..30f1729fac 100644 --- a/test/specs/modules/Dropdown/Dropdown-test.js +++ b/test/specs/modules/Dropdown/Dropdown-test.js @@ -594,6 +594,35 @@ describe('Dropdown', () => { }) }) + describe('closeOnEscape', () => { + it('closes the dropdown when Escape key is pressed by default', () => { + wrapperMount() + + dropdownMenuIsOpen() + + domEvent.keyDown(document, { key: 'Escape' }) + dropdownMenuIsClosed() + }) + + it('closes the dropdown when is "true" and Escape key is pressed', () => { + wrapperMount() + + dropdownMenuIsOpen() + + domEvent.keyDown(document, { key: 'Escape' }) + dropdownMenuIsClosed() + }) + + it('does not close the dropdown when false and Escape key is pressed', () => { + wrapperMount() + + dropdownMenuIsOpen() + + domEvent.keyDown(document, { key: 'Escape' }) + dropdownMenuIsOpen() + }) + }) + describe('setSelectedIndex', () => { it('will call setSelectedIndex if options change', () => { wrapperMount()