diff --git a/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleSearchQuery.js b/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleSearchQuery.js
new file mode 100644
index 0000000000..181c83d4d7
--- /dev/null
+++ b/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 (
+
+ )
+ }
+}
diff --git a/docs/app/Examples/modules/Dropdown/Usage/index.js b/docs/app/Examples/modules/Dropdown/Usage/index.js
index 50ef11b701..7539e841e3 100644
--- a/docs/app/Examples/modules/Dropdown/Usage/index.js
+++ b/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'
/>
+
+
+ This example also shows how to override default bevahiour of the search query which keeps
+ entered value after selection.
+
+
= minCharacters) {
@@ -883,7 +887,7 @@ export default class Dropdown extends Component {
clearSearchQuery = () => {
debug('clearSearchQuery()')
- this.setState({ searchQuery: '' })
+ this.trySetState({ searchQuery: '' })
}
setValue = (value) => {
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index f973db9716..ccc4b0d3fb 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/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()
+ .should.have.state('searchQuery', 'foo')
+ })
+ })
+
it('closes on blur', () => {
wrapperMount()
.simulate('click')
@@ -475,6 +482,18 @@ describe('Dropdown', () => {
})
})
+ describe('searchQuery', () => {
+ it('defaults to empty string', () => {
+ shallow()
+ .should.have.state('searchQuery', '')
+ })
+
+ it('passes value to state', () => {
+ shallow()
+ .should.have.state('searchQuery', 'foo')
+ })
+ })
+
describe('selected item', () => {
it('defaults to the first item', () => {
wrapperShallow()