feat(Dropdown): add openOnFocus and closeOnBlur

docs/app/Examples/modules/Dropdown/Usage/DropdownExampleCloseOnBlur.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+import { friendOptions } from '../common'
+
+const DropdownExampleCloseOnBlur = () => (
+  <div>
+    <Dropdown placeholder='I close on blur' closeOnBlur fluid selection options={friendOptions} />
+    <br />
+    <Dropdown placeholder='I stay open on blur' closeOnBlur={false} fluid selection options={friendOptions} />
+  </div>
+)
+
+export default DropdownExampleCloseOnBlur

docs/app/Examples/modules/Dropdown/Usage/DropdownExampleOpenOnFocus.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+import { friendOptions } from '../common'
+
+const DropdownExampleOpenOnFocus = () => (
+  <div>
+    <Dropdown placeholder='I stay open on focus' openOnFocus fluid selection options={friendOptions} />
+    <br />
+    <Dropdown placeholder='I close when not focussed' openOnFocus={false} fluid selection options={friendOptions} />
+  </div>
+)
+
+export default DropdownExampleOpenOnFocus

docs/app/Examples/modules/Dropdown/Usage/index.js

@@ -4,6 +4,18 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
 const DropdownUsageExamples = () => (
   <ExampleSection title='Usage'>
+    <ComponentExample
+      title='Open On Focus'
+      description='A dropdown that opens when it is focussed on.'
+      examplePath='modules/Dropdown/Usage/DropdownExampleOpenOnFocus'
+    />
+
+    <ComponentExample
+      title='Close On Blur'
+      description='A dropdown that closes when it blurs'
+      examplePath='modules/Dropdown/Usage/DropdownExampleCloseOnBlur'
+    />
+
     <ComponentExample
       title='Uncontrolled'
       description='A dropdown can behave like an uncontrolled input.'

src/modules/Dropdown/Dropdown.js

@@ -296,6 +296,12 @@ export default class Dropdown extends Component {
     /** The text displayed in the dropdown, usually for the active item. */
     text: PropTypes.string,
 
+    /** Whether or not the menu should open when the dropdown is focused. */
+    openOnFocus: PropTypes.bool,
+
+    /** Whether or not the menu should close when the dropdown is blurred. */
+    closeOnBlur: PropTypes.bool,
+
     /** Custom element to trigger the menu to become visible. Takes place of 'text'. */
     trigger: customPropTypes.every([
       customPropTypes.disallow(['selection', 'text']),
@@ -320,6 +326,8 @@ export default class Dropdown extends Component {
     noResultsMessage: 'No results found.',
     renderLabel: ({ text }) => text,
     selectOnBlur: true,
+    openOnFocus: true,
+    closeOnBlur: true,
   }
 
   static autoControlledProps = [
@@ -395,8 +403,9 @@ export default class Dropdown extends Component {
     if (!prevState.focus && this.state.focus) {
       debug('dropdown focused')
       if (!this.isMouseDown) {
+        const { openOnFocus } = this.props
         debug('mouse is not down, opening')
-        this.open()
+        if (openOnFocus) this.open()
       }
       if (!this.state.open) {
         document.addEventListener('keydown', this.openOnArrow)
@@ -409,8 +418,9 @@ export default class Dropdown extends Component {
     } else if (prevState.focus && !this.state.focus) {
       debug('dropdown blurred')
       if (!this.isMouseDown) {
+        const { closeOnBlur } = this.props
         debug('mouse is not down, closing')
-        this.close()
+        if (closeOnBlur) this.close()
       }
       document.removeEventListener('keydown', this.openOnArrow)
       document.removeEventListener('keydown', this.openOnSpace)