diff --git a/web/components/filter-select-users.tsx b/web/components/filter-select-users.tsx index a70e3680..93badf20 100644 --- a/web/components/filter-select-users.tsx +++ b/web/components/filter-select-users.tsx @@ -1,12 +1,11 @@ import { UserIcon } from '@heroicons/react/outline' import { useUsers } from 'web/hooks/use-users' import { User } from 'common/user' -import { Fragment, useState } from 'react' +import { Fragment, useMemo, useState } from 'react' import clsx from 'clsx' import { Menu, Transition } from '@headlessui/react' import { Avatar } from 'web/components/avatar' import { Row } from 'web/components/layout/row' -import { debounce } from 'lodash' export function FilterSelectUsers(props: { setSelectedUsers: (users: User[]) => void @@ -16,18 +15,20 @@ export function FilterSelectUsers(props: { const { ignoreUserIds, selectedUsers, setSelectedUsers } = props const users = useUsers() const [query, setQuery] = useState('') - - const filteredUsers = - query === '' - ? users - : users.filter((user: User) => { + const [filteredUsers, setFilteredUsers] = useState([]) + const beginQuerying = query.length > 2 + useMemo(() => { + if (beginQuerying) + setFilteredUsers( + users.filter((user: User) => { return ( !selectedUsers.map((user) => user.name).includes(user.name) && !ignoreUserIds.includes(user.id) && user.name.toLowerCase().includes(query.toLowerCase()) ) }) - const debouncedQuery = debounce(setQuery, 50) + ) + }, [beginQuerying, users, selectedUsers, ignoreUserIds, query]) return (
@@ -40,7 +41,7 @@ export function FilterSelectUsers(props: { name="user name" id="user name" value={query} - onChange={(e) => debouncedQuery(e.target.value)} + onChange={(e) => setQuery(e.target.value)} className="input input-bordered block w-full pl-10 focus:border-gray-300 " placeholder="Austin Chen" /> @@ -48,13 +49,13 @@ export function FilterSelectUsers(props: { {({}) => (