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