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