Function InnerAutocomplete

site/src/components/UserAutocomplete/UserAutocomplete.tsx:140–262

({
	className,
	error,
	label,
	onChange,
	shouldFilter,
	setFilter,
	isFetching,
	users,
	value,
}: InnerAutocompleteProps<T>)

	};

const InnerAutocomplete = <T extends SelectedUser>({
	className,
	error,
	label,
	onChange,
	shouldFilter,
	setFilter,
	isFetching,
	users,
	value,
}: InnerAutocompleteProps<T>) => {
	const DEBOUNCE_MS = 750;

	const [open, setOpen] = useState(false);
	const [inputValue, setInputValue] = useState("");
	const id = useId();
	const debouncedInputValue = useDebouncedValue(inputValue, DEBOUNCE_MS);
	const { debounced: debouncedSetFilter, cancelDebounce } =
		useDebouncedFunction((nextFilter: string) => {
			setFilter(nextFilter);
		}, DEBOUNCE_MS);

	const selectedInputValue = value?.email ?? value?.username ?? "";
	const selectedFilterValue = value?.username ?? "";
	// Keep spinner only while typing away from the selected value.
	const isLoadingOptions =
		selectedInputValue !== inputValue &&
		((inputValue !== "" && debouncedInputValue !== inputValue) || isFetching);

	const handleOpenChange = (nextOpen: boolean) => {
		setOpen(nextOpen);
		cancelDebounce();
		if (nextOpen) {
			setInputValue(selectedInputValue);
			setFilter(selectedFilterValue);
			return;
		}
		setInputValue("");
		setFilter(undefined);
	};

	return (
		<div className={cn("flex flex-col gap-2", className)}>
			{label && <Label htmlFor={id}>{label}</Label>}
			<Combobox
				value={value?.username}
				onValueChange={(newValue) => {
					if (!newValue) {
						onChange(null);
						return;
					}
					onChange(users?.find((user) => user.username === newValue) ?? null);
				}}
				open={open}
				onOpenChange={handleOpenChange}
			>
				<ComboboxTrigger asChild>
					<Button variant="outline">