Function UsersCombobox

site/src/pages/TasksPage/UsersCombobox.tsx:40–117

({
	value,
	onValueChange,
})

};

export const UsersCombobox: FC<UsersComboboxProps> = ({
	value,
	onValueChange,
}) => {
	const [open, setOpen] = useState(false);
	const [search, setSearch] = useState("");
	const debouncedSearch = useDebouncedValue(search, 250);
	const { user } = useAuthenticated();
	const { data: options } = useQuery({
		...users({ q: debouncedSearch ? `name:"${debouncedSearch}"` : "" }),
		select: (res) => mapUsersToOptions(res.users, user, value),
		placeholderData: keepPreviousData,
	});
	const selectedOption = options?.find((o) => o.value === value);

	return (
		<Popover open={open} onOpenChange={setOpen}>
			<PopoverTrigger asChild>
				<Button
					disabled={!options}
					variant="outline"
					role="combobox"
					aria-expanded={open}
					className="w-[280px] justify-between"
				>
					{options ? (
						selectedOption ? (
							<UserItem option={selectedOption} className="-ml-1" />
						) : (
							"Select user..."
						)
					) : (
						<Skeleton variant="text" className="w-[120px] h-3" />
					)}
					<ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
				</Button>
			</PopoverTrigger>
			<PopoverContent className="w-[280px] p-0">
				{/*
				 * `shouldFilter` is false because we don't want to filter on the `value`
				 * because we're using the `name` field to filter on the backend.
				 */}
				<Command shouldFilter={false}>
					<CommandInput
						placeholder="Search user..."
						value={search}
						onValueChange={setSearch}
					/>
					<CommandList>
						<CommandEmpty>No users found.</CommandEmpty>
						<CommandGroup>
							{options?.map((option) => (
								<CommandItem
									key={option.value}
									value={option.value}
									onSelect={() => {
										onValueChange(option.value);
										setOpen(false);