async filtering

src/form/Select/Select.tsx

@@ -92,7 +92,7 @@ export interface SelectProps {
   /**
    * Whether you can filter the select options.
    */
-  filterable?: boolean;
+  filterable?: boolean | 'async';
 
   /**
    * Whether you can clear the select after selection.
@@ -287,14 +287,19 @@ export const Select: FC<SelectProps> = ({
     }
   }, [children, options]);
 
-  const { result, keyword, search, resetSearch } = useFuzzy<SelectOptionProps>(
-    options,
-    {
-      keys: ['children', 'group'],
-      ...searchOptions,
-      getFn: menuDisabled ? () => '' : searchOptions?.getFn
-    }
-  );
+  const {
+    result: fuseResult,
+    keyword,
+    search,
+    resetSearch
+  } = useFuzzy<SelectOptionProps>(options, {
+    keys: ['children', 'group'],
+    ...searchOptions,
+    getFn: menuDisabled ? () => '' : searchOptions?.getFn
+  });
+
+  // TODO: Come back and cleanup the fuzzy search to be more extensible
+  const result = filterable === 'async' ? options : fuseResult;
 
   // If a keyword is used to filter options, automatically
   // highlight the first option for easy selection

src/form/Select/SelectInput/SelectInput.tsx

@@ -88,7 +88,7 @@ export interface SelectInputProps {
   /**
    * If true, the select input is filterable.
    */
-  filterable?: boolean;
+  filterable?: boolean | 'async';
 
   /**
    * If true, the select input allows multiple selection.

src/form/Select/SelectMenu/SelectMenu.tsx

@@ -67,7 +67,7 @@ export interface SelectMenuProps {
   /**
    * Whether users can filter the options or not.
    */
-  filterable?: boolean;
+  filterable?: boolean | 'async';
 
   /**
    * Whether the component is loading or not.
@@ -226,7 +226,7 @@ export const SelectMenu: FC<SelectMenuProps> = ({
         )}
         {options?.length === 0 &&
           !createable &&
-          filterable &&
+          filterable === true &&
           trimmedText &&
           !loading && (
             <ListItem className="select-menu-empty-search">
@@ -235,7 +235,7 @@ export const SelectMenu: FC<SelectMenuProps> = ({
           )}
         {options?.length === 0 &&
           !createable &&
-          filterable &&
+          filterable === true &&
           !trimmedText &&
           !loading && (
             <ListItem className="select-menu-empty">

src/form/Select/SingleSelect.story.tsx

@@ -473,6 +473,61 @@ export const AsyncDefaultValue = () => {
   );
 };
 
+export const AsyncFiltering = () => {
+  const [inputValue, setInputValue] = useState<string | null>(null);
+  const [value, setValue] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [opts, setOpts] = useState<{ value: string; label: string }[] | null>(
+    null
+  );
+
+  useEffect(() => {
+    let timeout;
+
+    async function getOptions() {
+      const next = await new Promise<any>(resolve => {
+        timeout = setTimeout(() => {
+          resolve(options);
+        }, 300);
+      });
+
+      const filtered = next.filter(n => n.label.includes(inputValue));
+      setOpts(filtered);
+      setLoading(false);
+    }
+
+    if (inputValue) {
+      getOptions();
+    } else {
+      setOpts(null);
+      setLoading(false);
+    }
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [inputValue]);
+
+  return (
+    <div style={{ width: 300 }}>
+      <Select
+        placeholder="Start typing to find options..."
+        filterable="async"
+        loading={loading}
+        value={value}
+        onChange={v => setValue(v)}
+        onInputKeydown={(e: any) => setInputValue(e.target.value)}
+      >
+        {opts?.map(o => (
+          <SelectOption key={o.value} value={o.value}>
+            {o.label}
+          </SelectOption>
+        ))}
+      </Select>
+    </div>
+  );
+};
+
 export const CustomLabels = () => {
   const [value, setValue] = useState<string | null>('facebook');
   return (