Function UserSelect

frontend/src/react/components/UserSelect.tsx:29–122

({
  value,
  onChange,
  disabled,
  placeholder,
  className,
  includeAllUsers,
}: UserSelectProps)

}

export function UserSelect({
  value,
  onChange,
  disabled,
  placeholder,
  className,
  includeAllUsers,
}: UserSelectProps) {
  const listUsers = useAppStore((state) => state.listUsers);
  const getOrFetchUserByIdentifier = useAppStore(
    (state) => state.getOrFetchUserByIdentifier
  );
  const [users, setUsers] = useState<User[]>([]);
  const [selectedUser, setSelectedUser] = useState<User | undefined>(undefined);
  const [search, setSearch] = useState("");
  // Track the latest in-flight request to ignore stale responses when the
  // user types quickly (a slow A can arrive after a fast B).
  const searchSeqRef = useRef(0);

  // Hydrate the selected user so its label renders even when it isn't in
  // the current search results.
  useEffect(() => {
    if (!value) {
      setSelectedUser(undefined);
      return;
    }
    let cancelled = false;
    getOrFetchUserByIdentifier({ identifier: value }).then((user) => {
      if (!cancelled) setSelectedUser(user);
    });
    return () => {
      cancelled = true;
    };
  }, [value, getOrFetchUserByIdentifier]);

  const handleSearch = useCallback(
    (query: string) => {
      setSearch(query);
      const seq = ++searchSeqRef.current;
      listUsers({
        pageSize: getDefaultPagination(),
        filter: { query: query.trim() },
      }).then(({ users: fetched }) => {
        if (seq === searchSeqRef.current) setUsers(fetched);
      });
    },
    [listUsers]
  );

  const options: ComboboxOption[] = useMemo(() => {
    const list: ComboboxOption[] = [];
    const seen = new Set<string>();
    if (includeAllUsers) {
      list.push({
        value: `${userNamePrefix}${ALL_USERS_USER_EMAIL}`,
        label: ALL_USERS_USER_EMAIL,
      });
      seen.add(`${userNamePrefix}${ALL_USERS_USER_EMAIL}`);