feat(Dropdown): Add minCharacters props. Fixes Semantic-Org#1124 (Sem…

…antic-Org#1690)

* feat(Dropdown): Add minCharacters props.

* feat(Dropdown): Add minCharacters props. Fixes Semantic-Org#1124

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;
 

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,
+      })
+    }
   }
 
   // ----------------------------------------

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(<Dropdown options={options} selection search minCharacters={4} />)
+
+      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(<Dropdown options={options} selection search onChange={onChangeSpy} />)