Function Autocomplete

site/src/components/Autocomplete/Autocomplete.tsx:58–493

({
	value,
	onChange,
	options,
	getOptionValue,
	getOptionLabel,
	isOptionEqualToValue,
	renderOption,
	loading = false,
	placeholder = "Select an option",
	noOptionsText = "No results found",
	open: controlledOpen,
	onOpenChange,
	inputValue: controlledInputValue,
	onInputChange,
	onEscapeKeyDown,
	onEnterEmpty,
	inlineSearch = false,
	clearable = true,
	disabled = false,
	startAdornment,
	className,
	triggerAriaInvalid,
	triggerAriaDescribedBy,
	id,
	"data-testid": testId,
}: AutocompleteProps<TOption>)

}

export function Autocomplete<TOption>({
	value,
	onChange,
	options,
	getOptionValue,
	getOptionLabel,
	isOptionEqualToValue,
	renderOption,
	loading = false,
	placeholder = "Select an option",
	noOptionsText = "No results found",
	open: controlledOpen,
	onOpenChange,
	inputValue: controlledInputValue,
	onInputChange,
	onEscapeKeyDown,
	onEnterEmpty,
	inlineSearch = false,
	clearable = true,
	disabled = false,
	startAdornment,
	className,
	triggerAriaInvalid,
	triggerAriaDescribedBy,
	id,
	"data-testid": testId,
}: AutocompleteProps<TOption>) {
	const inlineInputRef = useRef<HTMLInputElement>(null);
	const highlightedValueRef = useRef<string | null>(null);
	const [managedOpen, setManagedOpen] = useState(false);
	const [managedInputValue, setManagedInputValue] = useState("");
	const [highlightedValue, setHighlightedValue] = useState<string | null>(null);
	const generatedListboxId = useId();
	const listboxId = `${generatedListboxId}-listbox`;

	const updateHighlightedValue = useCallback((newValue: string | null) => {
		highlightedValueRef.current = newValue;
		setHighlightedValue(newValue);
	}, []);
	const isOpen = controlledOpen ?? managedOpen;
	const inputValue = controlledInputValue ?? managedInputValue;

	const handleOpenChange = useCallback(
		(newOpen: boolean) => {
			setManagedOpen(newOpen);
			onOpenChange?.(newOpen);
			if (!newOpen) {
				updateHighlightedValue(null);
			}
			if (!newOpen && controlledInputValue === undefined) {
				setManagedInputValue("");
			}
		},
		[onOpenChange, controlledInputValue, updateHighlightedValue],
	);

	const handleInputChange = useCallback(
		(newValue: string) => {