feat(Dropdown): add searchQuery prop (#2109)

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

@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+import { stateOptions } from '../common'
+// stateOptions = [ { key: 'AL', value: 'AL', text: 'Alabama' }, ...  ]
+
+export default class DropdownExampleSearchQuery extends Component {
+  state = { searchQuery: '' }
+
+  handleChange = (e, { value }) => this.setState({
+    value,
+    searchQuery: '',
+  })
+
+  handleSearchChange = (e, searchQuery) => this.setState({ searchQuery })
+
+  render() {
+    const { searchQuery, value } = this.state
+
+    return (
+      <Dropdown
+        fluid
+        multiple
+        onChange={this.handleChange}
+        onSearchChange={this.handleSearchChange}
+        options={stateOptions}
+        placeholder='State'
+        search
+        searchQuery={searchQuery}
+        selection
+        value={value}
+      />
+    )
+  }
+}

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
@@ -83,6 +84,16 @@ const DropdownUsageExamples = () => (
       description='A dropdown implements a search input shorthand.'
       examplePath='modules/Dropdown/Usage/DropdownExampleSearchInput'
     />
+    <ComponentExample
+      title='Search Query'
+      description='A dropdown allows to pass you the search query.'
+      examplePath='modules/Dropdown/Usage/DropdownExampleSearchQuery'
+    >
+      <Message info>
+        This example also shows how to override default bevahiour of the search query which keeps
+        entered value after selection.
+      </Message>
+    </ComponentExample>
     <ComponentExample
       title='Upward'
       description='A dropdown can open its menu upward.'

src/modules/Dropdown/Dropdown.d.ts

@@ -53,6 +53,9 @@ export interface DropdownProps {
   /** Initial value of open. */
   defaultOpen?: boolean;
 
+  /** Initial value of searchQuery. */
+  defaultSearchQuery?: string;
+
   /** Currently selected label in multi-select. */
   defaultSelectedLabel?: number | string;
 
@@ -216,6 +219,9 @@ export interface DropdownProps {
   /** A shorthand for a search input. */
   searchInput?: any;
 
+  /** Current value of searchQuery. Creates a controlled component. */
+  searchQuery?: string;
+
   /** Define whether the highlighted item should be selected on blur. */
   selectOnBlur?: boolean;
 

src/modules/Dropdown/Dropdown.js

@@ -92,6 +92,9 @@ export default class Dropdown extends Component {
     /** Initial value of open. */
     defaultOpen: PropTypes.bool,
 
+    /** Initial value of searchQuery. */
+    defaultSearchQuery: PropTypes.string,
+
     /** Currently selected label in multi-select. */
     defaultSelectedLabel: customPropTypes.every([
       customPropTypes.demand(['multiple']),
@@ -284,6 +287,9 @@ export default class Dropdown extends Component {
       PropTypes.object,
     ]),
 
+    /** Current value of searchQuery. Creates a controlled component. */
+    searchQuery: PropTypes.string,
+
     // TODO 'searchInMenu' or 'search='in menu' or ???  How to handle this markup and functionality?
 
     /** Define whether the highlighted item should be selected on blur. */
@@ -352,6 +358,7 @@ export default class Dropdown extends Component {
 
   static autoControlledProps = [
     'open',
+    'searchQuery',
     'selectedLabel',
     'value',
   ]
@@ -756,10 +763,7 @@ export default class Dropdown extends Component {
     const newQuery = value
 
     _.invoke(this.props, 'onSearchChange', e, { ...this.props, searchQuery: newQuery })
-    this.setState({
-      selectedIndex: 0,
-      searchQuery: newQuery,
-    })
+    this.trySetState({ searchQuery: newQuery }, { selectedIndex: 0 })
 
     // open search dropdown on search query
     if (!open && newQuery.length >= minCharacters) {
@@ -883,7 +887,7 @@ export default class Dropdown extends Component {
 
   clearSearchQuery = () => {
     debug('clearSearchQuery()')
-    this.setState({ searchQuery: '' })
+    this.trySetState({ searchQuery: '' })
   }
 
   setValue = (value) => {

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

@@ -106,6 +106,13 @@ describe('Dropdown', () => {
     'left', 'right', 'top', 'top left', 'top right', 'bottom', 'bottom left', 'bottom right',
   ])
 
+  describe('defaultSearchQuery', () => {
+    it('changes default value of searchQuery', () => {
+      shallow(<Dropdown defaultSearchQuery='foo' />)
+        .should.have.state('searchQuery', 'foo')
+    })
+  })
+
   it('closes on blur', () => {
     wrapperMount(<Dropdown options={options} />)
       .simulate('click')
@@ -491,6 +498,18 @@ describe('Dropdown', () => {
     })
   })
 
+  describe('searchQuery', () => {
+    it('defaults to empty string', () => {
+      shallow(<Dropdown />)
+        .should.have.state('searchQuery', '')
+    })
+
+    it('passes value to state', () => {
+      shallow(<Dropdown searchQuery='foo' />)
+        .should.have.state('searchQuery', 'foo')
+    })
+  })
+
   describe('selected item', () => {
     it('defaults to the first item', () => {
       wrapperShallow(<Dropdown options={options} selection />)