Function InnerMultiSelect

site/src/components/MultiUserSelect/MultiUserSelect.tsx:95–147

({
	className,
	error,
	onChange,
	selected,
	setFilter,
	users,
}: InnerAutocompleteProps<T>)

	};

const InnerMultiSelect = <T extends SelectedUser>({
	className,
	error,
	onChange,
	selected,
	setFilter,
	users,
}: InnerAutocompleteProps<T>) => {
	const [inputValue, setInputValue] = useState("");
	const { debounced, cancelDebounce } = useDebouncedFunction(
		(nextFilter: string) => {
			setFilter(nextFilter);
		},
		DEBOUNCE_MS,
	);

	return (
		<div className={cn("flex flex-col gap-4", className)}>
			<SearchField
				className="h-12 w-full rounded-lg"
				value={inputValue}
				aria-label="Search users"
				onChange={(query) => {
					setInputValue(query);
					debounced(query);
				}}
				onClear={() => {
					cancelDebounce();
					setInputValue("");
					setFilter("");
				}}
				placeholder="Search users..."
			/>
			<div className="h-96 w-full rounded-lg border border-border border-solid">
				<div className="h-full overflow-hidden p-px">
					<div
						className="h-full overflow-y-auto overflow-x-hidden overscroll-contain"
						onWheel={(event) => {
							event.stopPropagation();
						}}
					>
						<UsersTable
							error={error}
							onChange={onChange}
							selected={selected}
							users={users}
						/>
					</div>
				</div>
			</div>
		</div>
	);
};

type UsersTable<T extends SelectedUser> = {
	error: unknown;