diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts index 45a998cef3..1d187a37af 100644 --- a/src/modules/Dropdown/Dropdown.d.ts +++ b/src/modules/Dropdown/Dropdown.d.ts @@ -88,6 +88,9 @@ export interface DropdownProps { /** A dropdown can show that it is currently loading data. */ loading?: boolean; + /** The minimum characters for a search to begin showing results. */ + minCharacters?: number; + /** A selection dropdown can allow multiple selections. */ multiple?: boolean; diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js index b581473014..5e4fd12e98 100644 --- a/src/modules/Dropdown/Dropdown.js +++ b/src/modules/Dropdown/Dropdown.js @@ -140,6 +140,9 @@ export default class Dropdown extends Component { /** A dropdown can show that it is currently loading data. */ loading: PropTypes.bool, + /** The minimum characters for a search to begin showing results. */ + minCharacters: PropTypes.number, + /** A selection dropdown can allow multiple selections. */ multiple: PropTypes.bool, @@ -335,6 +338,7 @@ export default class Dropdown extends Component { selectOnBlur: true, openOnFocus: true, closeOnBlur: true, + minCharacters: 1, } static autoControlledProps = [ @@ -708,19 +712,21 @@ export default class Dropdown extends Component { debug(e.target.value) // prevent propagating to this.props.onChange() e.stopPropagation() - const { search, onSearchChange } = this.props + const { search, onSearchChange, minCharacters } = this.props const { open } = this.state const newQuery = e.target.value if (onSearchChange) onSearchChange(e, newQuery) - // open search dropdown on search query - if (search && newQuery && !open) this.open() + if (newQuery.length >= minCharacters) { + // open search dropdown on search query + if (search && newQuery && !open) this.open() - this.setState({ - selectedIndex: 0, - searchQuery: newQuery, - }) + this.setState({ + selectedIndex: 0, + searchQuery: newQuery, + }) + } } // ---------------------------------------- diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js index 28f94c47ba..539abed87b 100644 --- a/test/specs/modules/Dropdown/Dropdown-test.js +++ b/test/specs/modules/Dropdown/Dropdown-test.js @@ -1604,6 +1604,19 @@ describe('Dropdown', () => { dropdownMenuIsOpen() }) + it("Don't open the menu on change if query's length is less than minCharacters", () => { + wrapperMount() + + dropdownMenuIsClosed() + + // simulate search with query's length is less than minCharacters + wrapper + .find('input.search') + .simulate('change', { target: { value: faker.hacker.noun().substring(0, 1) } }) + + dropdownMenuIsClosed() + }) + it('does not call onChange on query change', () => { const onChangeSpy = sandbox.spy() wrapperMount()