feat(Dropdown): support custom search function (#469) (#484)

src/modules/Dropdown/Dropdown.js

@@ -131,9 +131,15 @@ export default class Dropdown extends Component {
     /** Message to display when there are no results. */
     noResultsMessage: PropTypes.string,
 
-    /** Define whether the highlighted item should be selected on blur */
+    /** Define whether the highlighted item should be selected on blur. */
     selectOnBlur: PropTypes.bool,
 
+    /** Make the dropdown options searchable by substring matching (default) or with a custom search function. */
+    search: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.func,
+    ]),
+
     // ------------------------------------
     // Callbacks
     // ------------------------------------
@@ -185,9 +191,6 @@ export default class Dropdown extends Component {
       PropTypes.oneOf(_meta.props.pointing),
     ]),
 
-    /** Make the dropdown options searchable. */
-    search: PropTypes.bool,
-
     /** The text displayed in the dropdown, usually for the active item. */
     text: PropTypes.string,
 
@@ -538,8 +541,12 @@ export default class Dropdown extends Component {
 
     // filter by search query
     if (search && searchQuery) {
-      const re = new RegExp(_.escapeRegExp(searchQuery), 'i')
-      filteredOptions = _.filter(filteredOptions, (opt) => re.test(opt.text))
+      if (_.isFunction(search)) {
+        filteredOptions = search(filteredOptions, searchQuery)
+      } else {
+        const re = new RegExp(_.escapeRegExp(searchQuery), 'i')
+        filteredOptions = _.filter(filteredOptions, (opt) => re.test(opt.text))
+      }
     }
 
     // insert the "add" item

test/specs/modules/Dropdown/Dropdown-test.js

@@ -1027,6 +1027,23 @@ describe('Dropdown Component', () => {
         .should.have.lengthOf(1, "Searching for an item's text did not yield any results.")
     })
 
+    it('filters the items based on custom search function', () => {
+      const searchFunction = sandbox.stub().returns(options.slice(0, 2))
+      const search = wrapperMount(<Dropdown options={options} selection search={searchFunction} />)
+        .find('input.search')
+      const searchQuery = '__nonExistingSearchQuery__'
+
+      // search for value yields 2 results as per our custom search function
+      search.simulate('change', { target: { value: searchQuery } })
+
+      searchFunction.should.have.been.calledOnce()
+      searchFunction.should.have.been.calledWithMatch(options, searchQuery)
+
+      wrapper
+        .find('DropdownItem')
+        .should.have.lengthOf(2, 'Searching with custom search function did not yield 2 results.')
+    })
+
     it('sets the selected item to the first search result', () => {
       const search = wrapperMount(<Dropdown options={options} selection search />)
         .find('input.search')