import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList, } from '@components/ui/command'; import { Input } from '@components/ui/input'; import { Popover, PopoverAnchor, PopoverContent } from '@components/ui/popover'; import { Skeleton } from '@components/ui/skeleton'; import { cn } from '@lib/utils'; import { Command as CommandPrimitive } from 'cmdk'; import { Check } from 'lucide-react'; import { useMemo, useState, forwardRef, FocusEvent } from 'react'; type AutoCompleteProps = { items: { value: T; label: string }[]; isLoading?: boolean; emptyMessage?: string; placeholder?: string; onChange?: (value: T) => void; value?: T; }; const AutoComplete = forwardRef>( ( { items, isLoading, emptyMessage = 'No items.', placeholder = 'Search...', onChange, value = '', }, ref ) => { const [open, setOpen] = useState(false); const [searchValue, setSearchValue] = useState(''); const labels = useMemo( () => items.reduce((acc, item) => { acc[item.value] = item.label; return acc; }, {} as Record), [items] ); const filteredItems = useMemo( () => items.filter((item) => item.label.toLowerCase().includes(searchValue.toLowerCase()) ), [items, searchValue] ); const reset = () => { onChange?.('' as string); setSearchValue(''); }; const handleSelect = (selectedValue: string) => { if (selectedValue === value) { reset(); } else { onChange?.(selectedValue); setSearchValue(labels[selectedValue] || ''); } setOpen(false); }; const handleBlur = (e: FocusEvent) => { if ( !e.relatedTarget?.hasAttribute('cmdk-list') && labels[value ?? ''] !== searchValue ) { reset(); } }; return (

setOpen(e.key !== 'Escape')} onFocus={() => setOpen(true)} onBlur={handleBlur} > setSearchValue(e.target.value)} onMouseDown={() => setOpen((prev) => !!searchValue || !prev)} /> {!open && } e.preventDefault()} onInteractOutside={(e) => { if ( e.target instanceof Element && e.target.hasAttribute('cmdk-input') ) { e.preventDefault(); } }} className="w-[--radix-popover-trigger-width] p-0" > {isLoading && (

)} {filteredItems.length > 0 && !isLoading ? ( {filteredItems.map((option) => ( e.preventDefault()} > {option.label} ))} ) : null} {!isLoading && filteredItems.length === 0 && ( {emptyMessage} )}

); } ); AutoComplete.displayName = 'AutoComplete'; export default AutoComplete;

autocomplete.tsx