fix(Dropdown): fix multiple problems

src/modules/Dropdown/Dropdown.js

@@ -533,7 +533,7 @@ export default class Dropdown extends Component {
     if (move === undefined) return
     e.preventDefault()
     this.moveSelectionBy(move)
-    if (!multiple) this.makeSelectedItemActive(e)
+    if (!multiple) this.makeSelectedItemActive(e, false)
   }
 
   openOnSpace = (e) => {
@@ -559,7 +559,7 @@ export default class Dropdown extends Component {
     this.open(e)
   }
 
-  makeSelectedItemActive = (e) => {
+  makeSelectedItemActive = (e, resetQuery = true) => {
     const { open } = this.state
     const { multiple, onAddItem } = this.props
     const item = this.getSelectedItem()
@@ -577,10 +577,10 @@ export default class Dropdown extends Component {
     if (multiple) {
       // state value may be undefined
       const newValue = _.union(this.state.value, [value])
-      this.setValue(newValue)
+      this.setValue(newValue, resetQuery)
       this.handleChange(e, newValue)
     } else {
-      this.setValue(value)
+      this.setValue(value, resetQuery)
       this.handleChange(e, value)
     }
   }
@@ -659,7 +659,20 @@ export default class Dropdown extends Component {
 
     if (!search) return this.toggle(e)
     if (open) return
-    if (searchQuery.length >= minCharacters || minCharacters === 1) this.open(e)
+    if (searchQuery.length >= minCharacters || minCharacters === 1) {
+      this.open(e)
+      return
+    }
+    if (this.searchRef) this.searchRef.focus()
+  }
+
+  handleIconClick = e => {
+    debug('handleIconClick()', e)
+
+    _.invoke(this.props, 'onClick', e, this.props)
+    // prevent handleClick()
+    e.stopPropagation()
+    this.toggle(e)
   }
 
   handleItemClick = (e, item) => {
@@ -859,12 +872,12 @@ export default class Dropdown extends Component {
   // Setters
   // ----------------------------------------
 
-  setValue = (value) => {
+  setValue = (value, resetQuery = true) => {
     debug('setValue()')
     debug('value', value)
-    const newState = {
+    const newState = resetQuery ? {
       searchQuery: '',
-    }
+    } : {}
 
     const { multiple, search } = this.props
     if (multiple && search && this.searchRef) this.searchRef.focus()
@@ -960,6 +973,17 @@ export default class Dropdown extends Component {
     this.scrollSelectedItemIntoView()
   }
 
+  // ----------------------------------------
+  // Overrides
+  // ----------------------------------------
+
+  handleIconOverrides = predefinedProps => ({
+    onClick: (e) => {
+      _.invoke(predefinedProps, 'onClick', e, predefinedProps)
+      this.handleIconClick(e)
+    },
+  })
+
   // ----------------------------------------
   // Refs
   // ----------------------------------------
@@ -1275,7 +1299,9 @@ export default class Dropdown extends Component {
         {this.renderSearchInput()}
         {this.renderSearchSizer()}
         {trigger || this.renderText()}
-        {Icon.create(icon)}
+        {Icon.create(icon, {
+          overrideProps: this.handleIconOverrides,
+        })}
         {this.renderMenu()}
       </ElementType>
     )

test/specs/commonTests/implementsShorthandProp.js

@@ -18,11 +18,12 @@ const shorthandComponentName = ShorthandComponent => {
  * @param {object} options
  * @param {string} options.propKey The name of the shorthand prop.
  * @param {string|function} options.ShorthandComponent The component that should be rendered from the shorthand value.
- * @param {function} options.mapValueToProps A function that maps a primitive value to the Component props
+ * @param {boolean} [options.alwaysPresent] Whether or not the shorthand exists by default.
+ * @param {function} options.mapValueToProps A function that maps a primitive value to the Component props.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
- * @param {boolean} [options.alwaysPresent] Whether or not the shorthand exists by default
+ * @param {boolean} [options.strictAssert] Selects an assertion method, `contain` will be used if true.
  */
 export default (Component, options = {}) => {
   const {
@@ -32,9 +33,11 @@ export default (Component, options = {}) => {
     ShorthandComponent,
     shorthandDefaultProps = {},
     shorthandOverrideProps = {},
+    strictAssert = true,
     requiredProps = {},
   } = options
   const { assertRequired } = helpers('implementsShorthandProp', Component)
+  const assertMethod = strictAssert ? 'contain' : 'containMatchingElement'
 
   describe(`${propKey} shorthand prop (common)`, () => {
     assertRequired(Component, 'a `Component`')
@@ -50,7 +53,7 @@ export default (Component, options = {}) => {
       })
       const element = createElement(Component, { ...requiredProps, [propKey]: value })
 
-      shallow(element).should.contain(shorthandElement)
+      shallow(element).should[assertMethod](shorthandElement)
     }
 
     if (alwaysPresent || Component.defaultProps && Component.defaultProps[propKey]) {

test/specs/modules/Dropdown/Dropdown-test.js

@@ -72,12 +72,16 @@ describe('Dropdown', () => {
   common.isConformant(Dropdown)
   common.hasUIClassName(Dropdown)
   common.hasSubComponents(Dropdown, [DropdownDivider, DropdownHeader, DropdownItem, DropdownMenu, DropdownSearchInput])
-  common.implementsIconProp(Dropdown)
+
+  common.implementsIconProp(Dropdown, {
+    assertExactMatch: false,
+  })
   common.implementsShorthandProp(Dropdown, {
     propKey: 'header',
     ShorthandComponent: DropdownHeader,
     mapValueToProps: val => ({ content: val }),
   })
+
   common.propKeyOnlyToClassName(Dropdown, 'disabled')
   common.propKeyOnlyToClassName(Dropdown, 'error')
   common.propKeyOnlyToClassName(Dropdown, 'loading')
@@ -431,6 +435,35 @@ describe('Dropdown', () => {
       wrapperRender(<Dropdown />)
         .should.contain.descendants('.dropdown.icon')
     })
+
+    it('always opens a dropdown on click', () => {
+      wrapperMount(<Dropdown options={options} selection search />)
+        .find('i.icon')
+        .simulate('click')
+
+      dropdownMenuIsOpen()
+    })
+
+    it('always opens a dropdown on click', () => {
+      wrapperMount(<Dropdown options={options} selection search />)
+        .find('i.icon')
+        .simulate('click')
+
+      dropdownMenuIsOpen()
+    })
+
+    it('passes onClick handler', () => {
+      const event = { target: null }
+      const onClick = sandbox.spy()
+      const props = { name: 'user', onClick }
+
+      wrapperMount(<Dropdown icon={props} options={options} />)
+        .find('i.icon')
+        .simulate('click', event)
+
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch(event, props)
+    })
   })
 
   describe('selected item', () => {
@@ -728,6 +761,16 @@ describe('Dropdown', () => {
       domEvent.keyDown(document, { key: 'Enter' })
       dropdownMenuIsClosed()
     })
+
+    it('keeps value of the searchQuery when selection is changed', () => {
+      wrapperMount(<Dropdown options={options} selection search />)
+
+      wrapper.setState({ searchQuery: 'foo' })
+      wrapper.simulate('click')
+      domEvent.keyDown(document, { key: 'ArrowDown' })
+
+      wrapper.should.have.state('searchQuery', 'foo')
+    })
   })
 
   describe('value', () => {
@@ -1638,6 +1681,18 @@ describe('Dropdown', () => {
       )
     })
 
+    it('sets focus to the search input on click on the placeholder', () => {
+      wrapperMount(<Dropdown minCharacters={3} options={options} placeholder='foo' selection search />)
+        .find('.default.text')
+        .simulate('click')
+
+      const activeElement = document.activeElement
+      const searchIsFocused = activeElement === document.querySelector('input.search')
+      searchIsFocused.should.be.true(
+        `Expected "input.search" to be the active element but found ${activeElement} instead.`
+      )
+    })
+
     it('clears the search query when an item is selected', () => {
       // search for random item
       const searchQuery = _.sample(options).text