From 24a4a677483e93bb2ee53e264ef8ffc34381cbac Mon Sep 17 00:00:00 2001
From: mhatvan <markus_hatvan@aon.at>
Date: Wed, 29 May 2019 22:35:19 +0200
Subject: [PATCH 1/2] feat(Dropdown): add 'closeOnEscape' prop (#3622)

Signed-off-by: mhatvan <markus_hatvan@aon.at>
---
 .../Usage/DropdownExampleCloseOnEscape.js     | 60 +++++++++++++++++++
 .../examples/modules/Dropdown/Usage/index.js  | 12 +++-
 src/modules/Dropdown/Dropdown.d.ts            |  3 +
 src/modules/Dropdown/Dropdown.js              |  9 ++-
 test/specs/modules/Dropdown/Dropdown-test.js  | 32 ++++++++++
 5 files changed, 112 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/examples/modules/Dropdown/Usage/DropdownExampleCloseOnEscape.js

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 = () => (
+  <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
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'
     />
 
+    <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
diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts
index 2b58b75cfb..35bf0f1edc 100644
--- a/src/modules/Dropdown/Dropdown.d.ts
+++ b/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
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 7bb644d0b5..14a9ab4f5d 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/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) => {
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 5a8db9b4e0..df4c91a209 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -594,6 +594,38 @@ describe('Dropdown', () => {
     })
   })
 
+  describe('closeOnEscape', () => {
+    it('closes the dropdown when Escape is pressed by default', () => {
+      wrapperMount(<Dropdown defaultOpen />)
+
+      dropdownMenuIsOpen()
+
+      domEvent.keyDown(document, { key: 'Escape' })
+
+      dropdownMenuIsClosed()
+    })
+
+    it('closes the dropdown when true and Escape is pressed', () => {
+      wrapperMount(<Dropdown defaultOpen closeOnEscape />)
+
+      dropdownMenuIsOpen()
+
+      domEvent.keyDown(document, { key: 'Escape' })
+
+      dropdownMenuIsClosed()
+    })
+
+    it('does not close the dropdown when false and Escape 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} />)

From ae16fca39ef3f2a1d7d8808f1060e2cdd72f3241 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Sun, 9 Jun 2019 12:54:51 +0200
Subject: [PATCH 2/2] Update Dropdown-test.js

---
 test/specs/modules/Dropdown/Dropdown-test.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 44d7afc73a..30f1729fac 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -595,33 +595,30 @@ describe('Dropdown', () => {
   })
 
   describe('closeOnEscape', () => {
-    it('closes the dropdown when Escape is pressed by default', () => {
+    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 true and Escape is pressed', () => {
+    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 is pressed', () => {
+    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()
     })
   })