feat(Dropdown): add closeOnChange prop (#1252)

Author: apiv

Diff for: docs/app/Examples/modules/Dropdown/Usage/DropdownExampleCloseOnChange.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+import { getOptions } from '../common'
+
+const DropdownExampleCloseOnChange = () => (
+  <div>
+    <Dropdown multiple search selection closeOnChange options={getOptions(5)} placeholder='I close on change' />
+    {' '}
+    <Dropdown multiple search selection options={getOptions(5)} placeholder='I stay open on change' />
+  </div>
+)
+
+export default DropdownExampleCloseOnChange

Diff for: docs/app/Examples/modules/Dropdown/Usage/index.js

@@ -16,6 +16,12 @@ const DropdownUsageExamples = () => (
       examplePath='modules/Dropdown/Usage/DropdownExampleCloseOnBlur'
     />
 
+    <ComponentExample
+      title='Close On Change'
+      description='A multiple selection dropdown can close when the user changes its value.'
+      examplePath='modules/Dropdown/Usage/DropdownExampleCloseOnChange'
+    />
+
     <ComponentExample
       title='Uncontrolled'
       description='A dropdown can behave like an uncontrolled input.'

Diff for: src/modules/Dropdown/Dropdown.js

@@ -85,6 +85,13 @@ 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 menu should close when a value is selected from the dropdown.
+     * By default, multiple selection dropdowns will remain open on change, while single
+     * selection dropdowns will close on change.
+     */
+    closeOnChange: PropTypes.bool,
+
     /** A compact dropdown has no minimum width. */
     compact: PropTypes.bool,
 
@@ -480,6 +487,15 @@ export default class Dropdown extends Component {
     if (onChange) onChange(e, { ...this.props, value })
   }
 
+  closeOnChange = (e) => {
+    const { closeOnChange, multiple } = this.props
+    const shouldClose = _.isUndefined(closeOnChange)
+      ? !multiple
+      : closeOnChange
+
+    if (shouldClose) this.close(e)
+  }
+
   closeOnEscape = (e) => {
     if (keyboardKey.getCode(e) !== keyboardKey.Escape) return
     e.preventDefault()
@@ -557,10 +573,9 @@ export default class Dropdown extends Component {
     debug(keyboardKey.getName(e))
     if (keyboardKey.getCode(e) !== keyboardKey.Enter) return
     e.preventDefault()
-    const { multiple } = this.props
 
     this.makeSelectedItemActive(e)
-    if (!multiple) this.close()
+    this.closeOnChange(e)
   }
 
   removeItemOnBackspace = (e) => {
@@ -651,8 +666,8 @@ export default class Dropdown extends Component {
     } else {
       this.setValue(value)
       this.handleChange(e, value)
-      this.close()
     }
+    this.closeOnChange(e)
   }
 
   handleFocus = (e) => {

Diff for: test/specs/modules/Dropdown/Dropdown-test.js

@@ -371,6 +371,34 @@ describe('Dropdown Component', () => {
     })
   })
 
+  describe('closeOnChange', () => {
+    it('will close when defined and dropdown is multiple', () => {
+      wrapperMount(<Dropdown selection multiple search closeOnChange options={options} />)
+        .simulate('click')
+
+      dropdownMenuIsOpen()
+
+      wrapper.find('DropdownItem')
+        .first()
+        .simulate('click', nativeEvent)
+
+      dropdownMenuIsClosed()
+    })
+
+    it('will remain open when undefined and dropdown is multiple', () => {
+      wrapperMount(<Dropdown selection multiple search options={options} />)
+        .simulate('click')
+
+      dropdownMenuIsOpen()
+
+      wrapper.find('DropdownItem')
+        .first()
+        .simulate('click', nativeEvent)
+
+      dropdownMenuIsOpen()
+    })
+  })
+
   describe('isMouseDown', () => {
     it('tracks when the mouse is down', () => {
       wrapperShallow(<Dropdown />)