♻️ refactor: auto focus on search input (#83)

Co-authored-by: Ayobami Akingbade <[email protected]>

src/components/app/form/input/search.tsx

@@ -1,6 +1,6 @@
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Loader, Search } from "react-feather";
 
 import { Input } from "@/components/ui/input";
@@ -9,12 +9,24 @@ interface IProps {
   onChange: (value: string) => void;
   loading?: boolean;
   initialValue?: string;
+  shouldAutoFocus?: boolean;
 }
 
-export function FormSearch({ onChange, loading, initialValue }: IProps) {
+export function FormSearch({
+  onChange,
+  loading,
+  initialValue,
+  shouldAutoFocus,
+}: IProps) {
   const { _ } = useLingui();
-
   const [value, setValue] = useState(initialValue || "");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (shouldAutoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [shouldAutoFocus, value]);
 
   return (
     <div className="relative flex w-full">
@@ -37,6 +49,7 @@ export function FormSearch({ onChange, loading, initialValue }: IProps) {
           setValue(e.target.value);
         }}
         placeholder={_(msg`Search`)}
+        ref={inputRef}
       />
     </div>
   );

src/components/ui/select.tsx

@@ -176,24 +176,60 @@ export interface ISelectProps {
   };
 }
 
+const LOCAL_SEARCH_THRESHOLD = 10;
+
 export function Select({
   onChange,
-  options,
+  options: fullOptions,
   disabled,
   isLoading,
   value,
   name,
   placeholder,
   className,
-  onSearch,
+  onSearch: onSearchForAsync,
   disabledOptions,
 }: ISelectProps) {
   const { _ } = useLingui();
 
-  const valueLabel = options.find(
+  const valueLabel = fullOptions.find(
     (option) => String(option.value) === String(value)
   )?.label;
 
+  const [searchString, setSearchString] = React.useState("");
+
+  const onSearch = React.useMemo<ISelectProps["onSearch"]>(() => {
+    if (onSearchForAsync) {
+      return onSearchForAsync;
+    }
+    if (fullOptions.length <= LOCAL_SEARCH_THRESHOLD) {
+      return undefined;
+    }
+
+    return {
+      isLoading: false,
+      value: searchString,
+      onChange: setSearchString,
+    };
+  }, [fullOptions, searchString]);
+
+  const optionsToRender = React.useMemo<ISelectData[]>(() => {
+    if (!onSearch) {
+      return fullOptions;
+    }
+
+    if (!searchString) {
+      return fullOptions;
+    }
+
+    const searchStringInLower = searchString.toLowerCase();
+
+    return fullOptions.filter(({ label }) =>
+      _(label).toLocaleLowerCase().includes(searchStringInLower)
+    );
+  }, [fullOptions, searchString]);
+  const [isOpen, setIsOpen] = React.useState(false);
+
   return (
     <SelectRoot
       onValueChange={(value$1) => {
@@ -202,6 +238,7 @@ export function Select({
         }
       }}
       value={value}
+      onOpenChange={setIsOpen}
     >
       <SelectTrigger
         className={className}
@@ -221,17 +258,20 @@ export function Select({
               initialValue={onSearch.value}
               onChange={onSearch.onChange}
               loading={onSearch.isLoading}
+              shouldAutoFocus={isOpen}
             />
           </div>
         )}
-        {onSearch?.value && options.length === 0 && !onSearch?.isLoading && (
-          <EmptyWrapper text={msg`No Search Results`} />
-        )}
-        {options.length === 0 && !onSearch && (
+        {onSearch?.value &&
+          optionsToRender.length === 0 &&
+          !onSearch?.isLoading && (
+            <EmptyWrapper text={msg`No Search Results`} />
+          )}
+        {fullOptions.length === 0 && !onSearch && (
           <EmptyWrapper text={msg`No Options`} />
         )}
         {onSearch?.isLoading && <ListSkeleton count={10} />}
-        {options.map(({ value: value$1, label }) => (
+        {optionsToRender.map(({ value: value$1, label }) => (
           <SelectItem
             key={String(value$1)}
             value={String(value$1)}