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()