Function SearchInput

src/components/ui/search/SearchInput.tsx:33–207

({
  search,
  onSelect,
  itemHeight,
  Item,
  placeholder,
  openListOnFocus,
  bindShortcut,
  displayShortcut,
  id,
}: SearchInputProps<T>)

}

export default function SearchInput<T extends { id: string }>({
  search,
  onSelect,
  itemHeight,
  Item,
  placeholder,
  openListOnFocus,
  bindShortcut,
  displayShortcut,
  id,
}: SearchInputProps<T>) {
  const t = useTranslations();
  const commandRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const groupRef = useRef(null);

  const [initialed, setInitialed] = useState(false);
  const [open, setOpen] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const [items, setItems] = useState<T[]>([]);

  const onSearch = useDebounceFn(
    (input: string) => {
      (async () => {
        const items = (await Promise.resolve(search(input))) ?? [];
        setItems(items);
        setOpen(true);
      })();
    },
    100,
    [],
  );

  useEffect(() => {
    if (!initialed) {
      setInitialed(true);
      return;
    }

    if (inputValue || openListOnFocus) {
      onSearch(inputValue);
    } else {
      setOpen(false);
    }
  }, [inputValue, openListOnFocus]);

  // toggle the menu when ⌘ + bindShortcut is pressed
  useEffect(() => {
    if (bindShortcut) {
      const onKeyDown = (e: KeyboardEvent) => {
        if (e.key === bindShortcut.toLowerCase() && (e.metaKey || e.ctrlKey)) {
          e.preventDefault();
          e.stopPropagation();
          inputRef.current?.focus();
          setTimeout(() => inputRef.current?.select());
        }
      };