Add prop to override default search debounce time

Author: gargrave

src/components/Select/Select.tsx

@@ -26,6 +26,16 @@ export type SelectProps = {
    * (Optional) Callback to provide async search capabilities.
    */
   asyncSearch?: (searchString: string) => Promise<any> // TODO: type this correctly
+  /**
+   * (Optional) Override setting for the debounce time (in ms) that will occur before
+   * an async search is triggered.
+   *
+   * This is useful for preventing triggering multiple instantaneous searching,
+   * and thus give your users time to type before triggering the search.
+   *
+   * **Default:** 500
+   */
+  asyncSearchDebounceTime?: number
   /**
    * (Optional) Text to display in the menu when an async search call is pending
    * **Default:** "Searching..."
@@ -151,6 +161,7 @@ export type SelectProps = {
 export const Select: React.FC<SelectProps> = React.memo(props => {
   const {
     asyncSearch,
+    asyncSearchDebounceTime = DEFAULT_ASYNC_SEARCH_DEBOUNCE,
     asyncSearchingText = DEFAULT_ASYNC_SEARCHING_TEXT,
     clearable = true,
     disabled = false,
@@ -239,7 +250,7 @@ export const Select: React.FC<SelectProps> = React.memo(props => {
             props,
             type: SelectActionType.asyncSearchEnd,
           })
-        }, DEFAULT_ASYNC_SEARCH_DEBOUNCE),
+        }, asyncSearchDebounceTime),
         [asyncSearch, props],
       )
     : () => void 0

src/components/Select/styleguide/AsyncSearch.example.tsx

@@ -29,8 +29,25 @@ export const Example = () => {
   return (
     <>
       <h2>Async Searching</h2>
+      <p className="description">
+        If you need to load and/or search for options asynchronously, you can do
+        so with the async searching options. Provide an{' '}
+        <span className="code">asyncSearch</span> implementation, which takes a
+        string (the current search string) and resolves a Promise with a new set
+        of options.
+      </p>
+      <p className="description">
+        The search has a debounce timer attached to it, so you can specify the
+        length of the delay that will occur before the search is actually
+        triggered (in general, you don't want to fire searches immediately, but
+        rather give your users time to search and rest before sending the search
+        request).
+      </p>
+
       <Select
         asyncSearch={userSearch}
+        asyncSearchDebounceTime={350}
+        asyncSearchingText="Doing a most excellent search..."
         getOptionKey={getOptionKey}
         getOptionLabel={getOptionLabel}
         onChange={setValue}

src/components/Select/tests/Search.spec.tsx

@@ -80,9 +80,8 @@ describe('Select :: Search', () => {
   })
 
   describe('Async search', () => {
-    const searchInput = 'searchString'
-
     it('performs async searching when the prop is present', async () => {
+      const searchInput = 'searchString'
       const reducerSpy = jest.spyOn(reducerImports, 'reducer')
       const debounceTimeout = DEFAULT_ASYNC_SEARCH_DEBOUNCE
       const testTimeout = 100
@@ -172,6 +171,50 @@ describe('Select :: Search', () => {
       expect(queryAllByText(DEFAULT_ASYNC_SEARCHING_TEXT)).toHaveLength(0)
     })
 
+    it('uses a custom debounce time when the prop is specified', async () => {
+      const debounceTimeout = 47
+      const testTimeout = 100
+      const asyncSearch = jest.fn(() => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve(searchResultUserOptions)
+          }, testTimeout)
+        })
+      })
+
+      const { container, getAllByText } = render(
+        <Select
+          {...defaultProps}
+          asyncSearch={asyncSearch}
+          asyncSearchDebounceTime={debounceTimeout}
+        />,
+      )
+
+      // just to be sure we get the menu open correctly...
+      const containerEl = container.querySelector(css('__container'))
+      fireEvent.mouseDown(containerEl as HTMLElement)
+      const optionsWrapper = container.querySelectorAll(css('__optionsWrapper'))
+      expect(optionsWrapper).toHaveLength(1)
+
+      const inputEl = container.querySelector('input') as HTMLElement
+      fireEvent.change(inputEl, { target: { value: 'hey there' } })
+      jest.advanceTimersByTime(debounceTimeout - 1)
+      expect(asyncSearch).toHaveBeenCalledTimes(0)
+      jest.advanceTimersByTime(1)
+      expect(asyncSearch).toHaveBeenCalledTimes(1)
+      expect(asyncSearch).toHaveBeenCalledWith('hey there')
+
+      // now wait for our mock "API Search" and ensure we handle the results correctly
+      await wait(() => {
+        jest.advanceTimersByTime(testTimeout)
+      })
+
+      // uses the returned user set for the options
+      searchResultUserOptions.forEach(result => {
+        expect(getAllByText(getUserFullName(result))).toHaveLength(1)
+      })
+    })
+
     it('resets options and ignore any pending debounced searches if search is empty', async () => {
       const debounceTimeout = DEFAULT_ASYNC_SEARCH_DEBOUNCE
       const testTimeout = 100