feat(Dropdown): add 'closeOnEscape' prop

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 = () => (
+  <React.Fragment>
+    <Dropdown
+      placeholder='I close on escape'
+      closeOnEscape
+      selection
+      options={friendOptions}
+    />{' '}
+    <Dropdown
+      placeholder='I stay open on escape'
+      closeOnEscape={false}
+      selection
+      options={friendOptions}
+    />
+  </React.Fragment>
+)
+
+export default DropdownExampleCloseOnEscape

docs/src/examples/modules/Dropdown/Usage/index.js

@@ -19,6 +19,12 @@ const DropdownUsageExamples = () => (
       examplePath='modules/Dropdown/Usage/DropdownExampleCloseOnBlur'
     />
 
+    <ComponentExample
+      title='Close On Escape'
+      description='A dropdown that closes when the user presses the escape key.'
+      examplePath='modules/Dropdown/Usage/DropdownExampleCloseOnEscape'
+    />
+
     <ComponentExample
       title='Close On Change'
       description='A multiple selection dropdown can close when the user changes its value.'
@@ -79,7 +85,7 @@ const DropdownUsageExamples = () => (
     <ComponentExample examplePath='modules/Dropdown/Usage/DropdownExampleTriggerImage' />
     <ComponentExample
       title='Multiple Custom Label'
-      description='A &quot;multiple&quot; dropdown can render customized label for selected items.'
+      description='A "multiple" dropdown can render customized label for selected items.'
       examplePath='modules/Dropdown/Usage/DropdownExampleMultipleCustomLabel'
     />
     <ComponentExample
@@ -98,8 +104,8 @@ const DropdownUsageExamples = () => (
       examplePath='modules/Dropdown/Usage/DropdownExampleSearchQuery'
     >
       <Message info>
-        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.
       </Message>
     </ComponentExample>
     <ComponentExample

src/modules/Dropdown/Dropdown.d.ts

@@ -45,6 +45,9 @@ export interface StrictDropdownProps {
   /** Whether or not the menu should close when the dropdown is blurred. */
   closeOnBlur?: boolean
 
+  /** Whether or not the dropdown should close when the escape key is pressed. */
+  closeOnEscape?: boolean
+
   /**
    * Whether or not the menu should close when a value is selected from the dropdown.
    * By default, multiple selection dropdowns will remain open on change, while single

src/modules/Dropdown/Dropdown.js

@@ -81,6 +81,9 @@ export default class Dropdown extends Component {
     /** Whether or not the menu should close when the dropdown is blurred. */
     closeOnBlur: PropTypes.bool,
 
+    /** Whether or not the dropdown should close when the escape key is pressed. */
+    closeOnEscape: PropTypes.bool,
+
     /**
      * Whether or not the menu should close when a value is selected from the dropdown.
      * By default, multiple selection dropdowns will remain open on change, while single
@@ -359,6 +362,7 @@ export default class Dropdown extends Component {
     additionLabel: 'Add ',
     additionPosition: 'top',
     closeOnBlur: true,
+    closeOnEscape: true,
     deburr: false,
     icon: 'dropdown',
     minCharacters: 1,
@@ -498,9 +502,12 @@ export default class Dropdown extends Component {
   }
 
   closeOnEscape = (e) => {
+    if (!this.props.closeOnEscape) return
     if (keyboardKey.getCode(e) !== keyboardKey.Escape) return
     e.preventDefault()
-    this.close()
+
+    debug('closeOnEscape()')
+    this.close(e)
   }
 
   moveSelectionOnKeyDown = (e) => {

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(<Dropdown defaultOpen />)
+
+      dropdownMenuIsOpen()
+
+      domEvent.keyDown(document, { key: 'Escape' })
+      dropdownMenuIsClosed()
+    })
+
+    it('closes the dropdown when is "true" and Escape key is pressed', () => {
+      wrapperMount(<Dropdown defaultOpen closeOnEscape />)
+
+      dropdownMenuIsOpen()
+
+      domEvent.keyDown(document, { key: 'Escape' })
+      dropdownMenuIsClosed()
+    })
+
+    it('does not close the dropdown when false and Escape key is pressed', () => {
+      wrapperMount(<Dropdown defaultOpen closeOnEscape={false} />)
+
+      dropdownMenuIsOpen()
+
+      domEvent.keyDown(document, { key: 'Escape' })
+      dropdownMenuIsOpen()
+    })
+  })
+
   describe('setSelectedIndex', () => {
     it('will call setSelectedIndex if options change', () => {
       wrapperMount(<Dropdown options={options} />)