fix: paginate and search member/group pickers (#2768)

2026-06-22 04:12:06 +10:00 · 2026-05-07 15:03:38 +10:00
parent bc3aa9c858
commit f66751668a
14 changed files with 522 additions and 136 deletions
@@ -34,7 +34,6 @@ import {
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
 import {
  Select,
  SelectContent,
@@ -44,6 +43,11 @@ import {
 } from '@documenso/ui/primitives/select';
 import { useToast } from '@documenso/ui/primitives/use-toast';

+import {
+  type OrganisationMemberOption,
+  OrganisationMembersMultiSelectCombobox,
+} from '~/components/general/organisation-members-multiselect-combobox';
+
 export type OrganisationGroupCreateDialogProps = {
  trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
@@ -64,6 +68,7 @@ export const OrganisationGroupCreateDialog = ({
  const { toast } = useToast();

  const [open, setOpen] = useState(false);
+  const [selectedMembers, setSelectedMembers] = useState<OrganisationMemberOption[]>([]);
  const organisation = useCurrentOrganisation();

  const form = useForm({
@@ -77,13 +82,6 @@ export const OrganisationGroupCreateDialog = ({

  const { mutateAsync: createOrganisationGroup } = trpc.organisation.group.create.useMutation();

-  const { data: membersFindResult, isLoading: isLoadingMembers } =
-    trpc.organisation.member.find.useQuery({
-      organisationId: organisation.id,
-    });
-
-  const members = membersFindResult?.data ?? [];
-
  const onFormSubmit = async ({
    name,
    organisationRole,
@@ -119,6 +117,7 @@ export const OrganisationGroupCreateDialog = ({

  useEffect(() => {
    form.reset();
+    setSelectedMembers([]);
  }, [open, form]);

  return (
@@ -178,7 +177,7 @@ export const OrganisationGroupCreateDialog = ({
                    </FormLabel>
                    <FormControl>
                      <Select {...field} onValueChange={field.onChange}>
-                        <SelectTrigger className="text-muted-foreground w-full">
+                        <SelectTrigger className="w-full text-muted-foreground">
                          <SelectValue />
                        </SelectTrigger>

@@ -209,16 +208,15 @@ export const OrganisationGroupCreateDialog = ({
                    </FormLabel>

                    <FormControl>
-                      <MultiSelectCombobox
-                        options={members.map((member) => ({
-                          label: member.name,
-                          value: member.id,
-                        }))}
-                        loading={isLoadingMembers}
-                        selectedValues={field.value}
-                        onChange={field.onChange}
-                        className="bg-background w-full"
-                        emptySelectionPlaceholder={t`Select members`}
+                      <OrganisationMembersMultiSelectCombobox
+                        organisationId={organisation.id}
+                        selectedMembers={selectedMembers}
+                        onChange={(members) => {
+                          setSelectedMembers(members);
+                          field.onChange(members.map((member) => member.id));
+                        }}
+                        className="w-full bg-background"
+                        dataTestId="group-members-picker"
                      />
                    </FormControl>

@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { OrganisationGroupType, TeamMemberRole } from '@prisma/client';
+import { TeamMemberRole } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
@@ -31,7 +31,6 @@ import {
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
 import {
  Select,
  SelectContent,
@@ -41,6 +40,10 @@ import {
 } from '@documenso/ui/primitives/select';
 import { useToast } from '@documenso/ui/primitives/use-toast';

+import {
+  type OrganisationGroupOption,
+  OrganisationGroupsMultiSelectCombobox,
+} from '~/components/general/organisation-groups-multiselect-combobox';
 import { useCurrentTeam } from '~/providers/team';

 export type TeamGroupCreateDialogProps = Omit<DialogPrimitive.DialogProps, 'children'>;
@@ -59,6 +62,7 @@ type TAddTeamMembersFormSchema = z.infer<typeof ZAddTeamMembersFormSchema>;
 export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps) => {
  const [open, setOpen] = useState(false);
  const [step, setStep] = useState<'SELECT' | 'ROLES'>('SELECT');
+  const [selectedGroups, setSelectedGroups] = useState<OrganisationGroupOption[]>([]);

  const { t } = useLingui();
  const { toast } = useToast();
@@ -74,26 +78,6 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)

  const { mutateAsync: createTeamGroups } = trpc.team.group.createMany.useMutation();

-  const organisationGroupQuery = trpc.organisation.group.find.useQuery({
-    organisationId: team.organisationId,
-    perPage: 100, // Won't really work if they somehow have more than 100 groups.
-    types: [OrganisationGroupType.CUSTOM],
-  });
-
-  const teamGroupQuery = trpc.team.group.find.useQuery({
-    teamId: team.id,
-    perPage: 100, // Won't really work if they somehow have more than 100 groups.
-  });
-
-  const avaliableOrganisationGroups = useMemo(() => {
-    const organisationGroups = organisationGroupQuery.data?.data ?? [];
-    const teamGroups = teamGroupQuery.data?.data ?? [];
-
-    return organisationGroups.filter(
-      (group) => !teamGroups.some((teamGroup) => teamGroup.organisationGroupId === group.id),
-    );
-  }, [organisationGroupQuery, teamGroupQuery]);
-
  const onFormSubmit = async ({ groups }: TAddTeamMembersFormSchema) => {
    try {
      await createTeamGroups({
@@ -121,6 +105,7 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
    if (!open) {
      form.reset();
      setStep('SELECT');
+      setSelectedGroups([]);
    }
  }, [open, form]);

@@ -178,28 +163,24 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
                        </FormLabel>

                        <FormControl>
-                          <MultiSelectCombobox
-                            options={avaliableOrganisationGroups.map((group) => ({
-                              label: group.name ?? group.organisationRole,
-                              value: group.id,
-                            }))}
-                            loading={organisationGroupQuery.isLoading || teamGroupQuery.isLoading}
-                            selectedValues={field.value.map(
-                              ({ organisationGroupId }) => organisationGroupId,
-                            )}
-                            onChange={(value) => {
+                          <OrganisationGroupsMultiSelectCombobox
+                            organisationId={team.organisationId}
+                            selectedGroups={selectedGroups}
+                            excludeTeamId={team.id}
+                            onChange={(groups) => {
+                              setSelectedGroups(groups);
                              field.onChange(
-                                value.map((organisationGroupId) => ({
-                                  organisationGroupId,
+                                groups.map((group) => ({
+                                  organisationGroupId: group.id,
                                  teamRole:
                                    field.value.find(
-                                      (value) => value.organisationGroupId === organisationGroupId,
+                                      (value) => value.organisationGroupId === group.id,
                                    )?.teamRole || TeamMemberRole.MEMBER,
                                })),
                              );
                            }}
-                            className="bg-background w-full"
-                            emptySelectionPlaceholder={t`Select groups`}
+                            className="w-full bg-background"
+                            dataTestId="team-groups-picker"
                          />
                        </FormControl>

@@ -243,9 +224,8 @@ export const TeamGroupCreateDialog = ({ ...props }: TeamGroupCreateDialogProps)
                            readOnly
                            className="bg-background"
                            value={
-                              avaliableOrganisationGroups.find(
-                                ({ id }) => id === group.organisationGroupId,
-                              )?.name || t`Untitled Group`
+                              selectedGroups.find(({ id }) => id === group.organisationGroupId)
+                                ?.name || t`Untitled Group`
                            }
                          />
                        </div>
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -36,7 +36,6 @@ import {
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
 import {
  Select,
  SelectContent,
@@ -48,6 +47,10 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 import { useToast } from '@documenso/ui/primitives/use-toast';

 import { OrganisationMemberInviteDialog } from '~/components/dialogs/organisation-member-invite-dialog';
+import {
+  type OrganisationMemberOption,
+  OrganisationMembersMultiSelectCombobox,
+} from '~/components/general/organisation-members-multiselect-combobox';
 import { useCurrentTeam } from '~/providers/team';

 export type TeamMemberCreateDialogProps = {
@@ -69,6 +72,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
  const [open, setOpen] = useState(false);
  const [step, setStep] = useState<'SELECT' | 'MEMBERS'>('SELECT');
  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+  const [selectedMembers, setSelectedMembers] = useState<OrganisationMemberOption[]>([]);
  const prevInviteDialogOpenRef = useRef(false);

  const { t } = useLingui();
@@ -92,25 +96,16 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi

  const { mutateAsync: createTeamMembers } = trpc.team.member.createMany.useMutation();

-  const organisationMemberQuery = trpc.organisation.member.find.useQuery({
+  // Lightweight count-only query for org members not already on this team.
+  // Powers the "no available members" empty state.
+  const availableMemberCountQuery = trpc.organisation.member.find.useQuery({
    organisationId: team.organisationId,
+    perPage: 1,
+    excludeTeamId: team.id,
  });

-  const teamMemberQuery = trpc.team.member.find.useQuery({
-    teamId: team.id,
-  });
-
-  const avaliableOrganisationMembers = useMemo(() => {
-    const organisationMembers = organisationMemberQuery.data?.data ?? [];
-    const teamMembers = teamMemberQuery.data?.data ?? [];
-
-    return organisationMembers.filter(
-      (member) => !teamMembers.some((teamMember) => teamMember.id === member.id),
-    );
-  }, [organisationMemberQuery, teamMemberQuery]);
-
  const hasNoAvailableMembers =
-    !organisationMemberQuery.isLoading && avaliableOrganisationMembers.length === 0;
+    !availableMemberCountQuery.isLoading && (availableMemberCountQuery.data?.count ?? 0) === 0;

  const onFormSubmit = async ({ members }: TAddTeamMembersFormSchema) => {
    if (members.length === 0) {
@@ -159,6 +154,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
      form.reset();
      setStep('SELECT');
      setInviteDialogOpen(false);
+      setSelectedMembers([]);
    }
  }, [open, form]);

@@ -296,29 +292,24 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                              )}
                            </div>
                          ) : (
-                            <MultiSelectCombobox
-                              options={avaliableOrganisationMembers.map((member) => ({
-                                label: member.name,
-                                value: member.id,
-                              }))}
-                              loading={organisationMemberQuery.isLoading}
-                              selectedValues={field.value.map(
-                                (member) => member.organisationMemberId,
-                              )}
-                              onChange={(value) => {
+                            <OrganisationMembersMultiSelectCombobox
+                              organisationId={team.organisationId}
+                              selectedMembers={selectedMembers}
+                              excludeTeamId={team.id}
+                              onChange={(members) => {
+                                setSelectedMembers(members);
                                field.onChange(
-                                  value.map((organisationMemberId) => ({
-                                    organisationMemberId,
+                                  members.map((member) => ({
+                                    organisationMemberId: member.id,
                                    teamRole:
                                      field.value.find(
-                                        (member) =>
-                                          member.organisationMemberId === organisationMemberId,
+                                        (entry) => entry.organisationMemberId === member.id,
                                      )?.teamRole || TeamMemberRole.MEMBER,
                                  })),
                                );
                              }}
                              className="w-full bg-background"
-                              emptySelectionPlaceholder={t`Select members`}
+                              dataTestId="team-members-picker"
                            />
                          )}
                        </FormControl>
@@ -394,9 +385,8 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                            readOnly
                            className="bg-background"
                            value={
-                              organisationMemberQuery.data?.data.find(
-                                ({ id }) => id === member.organisationMemberId,
-                              )?.name || ''
+                              selectedMembers.find(({ id }) => id === member.organisationMemberId)
+                                ?.name || ''
                            }
                          />
                        </div>
@@ -0,0 +1,115 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { OrganisationGroupType } from '@prisma/client';
+
+import { trpc } from '@documenso/trpc/react';
+import { MultiSelect, type Option } from '@documenso/ui/primitives/multiselect';
+
+export type OrganisationGroupOption = {
+  /** Organisation group ID. */
+  id: string;
+  name: string;
+};
+
+type OrganisationGroupsMultiSelectComboboxProps = {
+  organisationId: string;
+  /**
+   * Currently selected groups. Must include name so chips render with
+   * proper labels even before the first server search returns results.
+   */
+  selectedGroups: OrganisationGroupOption[];
+  onChange: (groups: OrganisationGroupOption[]) => void;
+  /**
+   * If set, organisation groups already attached to this team are filtered
+   * out of the search results server-side. Used by "add groups to team" flows.
+   */
+  excludeTeamId?: number;
+  /**
+   * Restrict search to specific group types. Defaults to CUSTOM groups only,
+   * matching how groups are managed in the organisation settings UI.
+   */
+  types?: OrganisationGroupType[];
+  /** Number of groups to fetch per search call. Defaults to the schema cap (100). */
+  perPage?: number;
+  className?: string;
+  dataTestId?: string;
+};
+
+const toOption = (group: OrganisationGroupOption): Option => ({
+  value: group.id,
+  label: group.name,
+  groupName: group.name,
+});
+
+const fromOption = (option: Option): OrganisationGroupOption => ({
+  id: option.value,
+  name: typeof option.groupName === 'string' ? option.groupName : option.label,
+});
+
+/**
+ * Searchable multi-select combobox for picking organisation groups,
+ * backed by `trpc.organisation.group.find` with server-side search.
+ *
+ * Renders selected groups as chips and supports an unbounded number of
+ * organisation groups (paged out via debounced server queries).
+ */
+export const OrganisationGroupsMultiSelectCombobox = ({
+  organisationId,
+  selectedGroups,
+  onChange,
+  excludeTeamId,
+  types = [OrganisationGroupType.CUSTOM],
+  perPage = 100,
+  className,
+  dataTestId,
+}: OrganisationGroupsMultiSelectComboboxProps) => {
+  const { _ } = useLingui();
+
+  const utils = trpc.useUtils();
+
+  const handleSearch = async (query: string): Promise<Option[]> => {
+    const result = await utils.organisation.group.find.fetch({
+      organisationId,
+      query,
+      page: 1,
+      perPage,
+      types,
+      excludeTeamId,
+    });
+
+    return result.data.map((group) =>
+      toOption({
+        id: group.id,
+        name: group.name ?? '',
+      }),
+    );
+  };
+
+  return (
+    <MultiSelect
+      className={className}
+      data-testid={dataTestId}
+      commandProps={{ label: _(msg`Select groups`) }}
+      inputProps={{ 'aria-label': _(msg`Select groups`) }}
+      placeholder={_(msg`Search groups by name`)}
+      value={selectedGroups.map(toOption)}
+      onChange={(options) => onChange(options.map(fromOption))}
+      onSearch={handleSearch}
+      triggerSearchOnFocus
+      hideClearAllButton
+      hidePlaceholderWhenSelected
+      delay={300}
+      loadingIndicator={
+        <p className="py-4 text-center text-sm text-muted-foreground">
+          <Trans>Loading...</Trans>
+        </p>
+      }
+      emptyIndicator={
+        <p className="py-4 text-center text-sm text-muted-foreground">
+          <Trans>No groups found</Trans>
+        </p>
+      }
+    />
+  );
+};
@@ -0,0 +1,112 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { trpc } from '@documenso/trpc/react';
+import { MultiSelect, type Option } from '@documenso/ui/primitives/multiselect';
+
+export type OrganisationMemberOption = {
+  /** Organisation member ID. */
+  id: string;
+  name: string;
+  email: string;
+};
+
+type OrganisationMembersMultiSelectComboboxProps = {
+  organisationId: string;
+  /**
+   * Currently selected members. Must include name/email so chips render with
+   * proper labels even before the first server search returns results.
+   */
+  selectedMembers: OrganisationMemberOption[];
+  onChange: (members: OrganisationMemberOption[]) => void;
+  /**
+   * If set, organisation members already on this team are filtered out of the
+   * search results server-side. Used by "add members to team" flows.
+   */
+  excludeTeamId?: number;
+  /** Number of members to fetch per search call. Defaults to the schema cap (100). */
+  perPage?: number;
+  className?: string;
+  dataTestId?: string;
+};
+
+const toOption = (member: OrganisationMemberOption): Option => ({
+  value: member.id,
+  label: member.name ? `${member.name} (${member.email})` : member.email,
+  // Stash these so we can reconstruct OrganisationMemberOption on change.
+  email: member.email,
+  name: member.name,
+});
+
+const fromOption = (option: Option): OrganisationMemberOption => ({
+  id: option.value,
+  name: typeof option.name === 'string' ? option.name : '',
+  email: typeof option.email === 'string' ? option.email : '',
+});
+
+/**
+ * Searchable multi-select combobox for picking organisation members,
+ * backed by `trpc.organisation.member.find` with server-side search.
+ *
+ * Renders selected members as chips and supports an unbounded number of
+ * organisation members (paged out via debounced server queries).
+ */
+export const OrganisationMembersMultiSelectCombobox = ({
+  organisationId,
+  selectedMembers,
+  onChange,
+  excludeTeamId,
+  perPage = 100,
+  className,
+  dataTestId,
+}: OrganisationMembersMultiSelectComboboxProps) => {
+  const { _ } = useLingui();
+
+  const utils = trpc.useUtils();
+
+  const handleSearch = async (query: string): Promise<Option[]> => {
+    const result = await utils.organisation.member.find.fetch({
+      organisationId,
+      query,
+      page: 1,
+      perPage,
+      excludeTeamId,
+    });
+
+    return result.data.map((member) =>
+      toOption({
+        id: member.id,
+        name: member.name,
+        email: member.email,
+      }),
+    );
+  };
+
+  return (
+    <MultiSelect
+      className={className}
+      data-testid={dataTestId}
+      commandProps={{ label: _(msg`Select members`) }}
+      inputProps={{ 'aria-label': _(msg`Select members`) }}
+      placeholder={_(msg`Search members by name or email`)}
+      value={selectedMembers.map(toOption)}
+      onChange={(options) => onChange(options.map(fromOption))}
+      onSearch={handleSearch}
+      triggerSearchOnFocus
+      hideClearAllButton
+      hidePlaceholderWhenSelected
+      delay={300}
+      loadingIndicator={
+        <p className="py-4 text-center text-sm text-muted-foreground">
+          <Trans>Loading...</Trans>
+        </p>
+      }
+      emptyIndicator={
+        <p className="py-4 text-center text-sm text-muted-foreground">
+          <Trans>No members found</Trans>
+        </p>
+      }
+    />
+  );
+};
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -17,7 +17,6 @@ import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translation
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindOrganisationGroupsResponse } from '@documenso/trpc/server/organisation-router/find-organisation-groups.types';
-import type { TFindOrganisationMembersResponse } from '@documenso/trpc/server/organisation-router/find-organisation-members.types';
 import { Button } from '@documenso/ui/primitives/button';
 import { DataTable, type DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import {
@@ -30,7 +29,6 @@ import {
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
 import {
  Select,
  SelectContent,
@@ -42,6 +40,10 @@ import { useToast } from '@documenso/ui/primitives/use-toast';

 import { OrganisationGroupDeleteDialog } from '~/components/dialogs/organisation-group-delete-dialog';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import {
+  type OrganisationMemberOption,
+  OrganisationMembersMultiSelectCombobox,
+} from '~/components/general/organisation-members-multiselect-combobox';
 import { SettingsHeader } from '~/components/general/settings-header';

 import type { Route } from './+types/o.$orgUrl.settings.groups.$id';
@@ -53,10 +55,6 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen

  const groupId = params.id;

-  const { data: members, isLoading: isLoadingMembers } = trpc.organisation.member.find.useQuery({
-    organisationId: organisation.id,
-  });
-
  const { data: groupData, isLoading: isLoadingGroup } = trpc.organisation.group.find.useQuery(
    {
      organisationId: organisation.id,
@@ -72,10 +70,10 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen

  const group = groupData?.data.find((g) => g.id === groupId);

-  if (isLoadingGroup || isLoadingMembers) {
+  if (isLoadingGroup) {
    return (
      <div className="flex items-center justify-center rounded-lg py-32">
-        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    );
  }
@@ -121,7 +119,7 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
        />
      </SettingsHeader>

-      <OrganisationGroupForm group={group} organisationMembers={members?.data || []} />
+      <OrganisationGroupForm group={group} />
    </div>
  );
 }
@@ -136,10 +134,9 @@ type TUpdateOrganisationGroupFormSchema = z.infer<typeof ZUpdateOrganisationGrou

 type OrganisationGroupFormOptions = {
  group: TFindOrganisationGroupsResponse['data'][number];
-  organisationMembers: TFindOrganisationMembersResponse['data'];
 };

-const OrganisationGroupForm = ({ group, organisationMembers }: OrganisationGroupFormOptions) => {
+const OrganisationGroupForm = ({ group }: OrganisationGroupFormOptions) => {
  const { toast } = useToast();
  const { t } = useLingui();

@@ -147,6 +144,16 @@ const OrganisationGroupForm = ({ group, organisationMembers }: OrganisationGroup

  const { mutateAsync: updateOrganisationGroup } = trpc.organisation.group.update.useMutation();

+  // Track full member details (name/email) keyed by id so chip labels render
+  // correctly even after the form has been mounted for a while.
+  const [selectedMembers, setSelectedMembers] = useState<OrganisationMemberOption[]>(() =>
+    group.members.map((member) => ({
+      id: member.id,
+      name: member.name,
+      email: member.email,
+    })),
+  );
+
  const form = useForm<TUpdateOrganisationGroupFormSchema>({
    resolver: zodResolver(ZUpdateOrganisationGroupFormSchema),
    defaultValues: {
@@ -258,15 +265,15 @@ const OrganisationGroupForm = ({ group, organisationMembers }: OrganisationGroup
                <Trans>Members</Trans>
              </FormLabel>
              <FormControl>
-                <MultiSelectCombobox
-                  options={organisationMembers.map((member) => ({
-                    label: member.name || member.email,
-                    value: member.id,
-                  }))}
-                  selectedValues={field.value}
-                  onChange={field.onChange}
+                <OrganisationMembersMultiSelectCombobox
+                  organisationId={organisation.id}
+                  selectedMembers={selectedMembers}
+                  onChange={(members) => {
+                    setSelectedMembers(members);
+                    field.onChange(members.map((member) => member.id));
+                  }}
                  className="w-full"
-                  emptySelectionPlaceholder={t`Select members`}
+                  dataTestId="group-members-picker"
                />
              </FormControl>
              <FormDescription>
@@ -312,10 +312,12 @@ test('[ORGANISATIONS]: manage groups and members', async ({ page }) => {
  await page.getByRole('textbox', { name: 'Group Name *' }).fill('CUSTOM_GROUP');
  await page.getByRole('combobox').filter({ hasText: 'Organisation Member' }).click();
  await page.getByRole('option', { name: 'Organisation Admin' }).click();
-  await page.getByRole('combobox').filter({ hasText: 'Select members' }).click();
+  await page.getByTestId('group-members-picker').click();
  await page.getByRole('option', { name: 'Member1' }).click();
  await page.getByRole('option', { name: 'Member2' }).click();
  await page.getByRole('option', { name: 'Member3' }).click();
+  // Close the multiselect dropdown so it doesn't overlap the submit button.
+  await page.getByRole('heading', { name: 'Create group' }).click();
  await page.getByTestId('dialog-create-organisation-button').click();
  await expect(page.getByText('Group has been created.').first()).toBeVisible();

@@ -338,8 +340,12 @@ test('[ORGANISATIONS]: manage groups and members', async ({ page }) => {
  await page.getByRole('textbox', { name: 'Group Name *' }).fill('CUSTOM_GROUP_A');
  await page.getByRole('combobox').filter({ hasText: 'Organisation Admin' }).click();
  await page.getByRole('option', { name: 'Organisation Member' }).click();
-  await page.getByRole('combobox').filter({ hasText: 'Member1, Member2, Member3' }).click();
-  await page.getByRole('option', { name: 'Member3' }).click();
+  // Remove Member3 by clicking the X on its chip in the multiselect.
+  await page
+    .getByTestId('group-members-picker')
+    .locator('div', { hasText: /^Member3/ })
+    .getByRole('button', { name: 'Remove' })
+    .click();
  await page.getByRole('button', { name: 'Update' }).click();
  await expect(page.getByText('Group has been updated successfully').first()).toBeVisible();

@@ -348,10 +354,12 @@ test('[ORGANISATIONS]: manage groups and members', async ({ page }) => {
  // Create a custom member group with the 3 admins to check that they still get the ADMIN roles.
  await page.getByRole('button', { name: 'Create group' }).click();
  await page.getByRole('textbox', { name: 'Group Name *' }).fill('CUSTOM_GROUP_ADMINS');
-  await page.getByRole('combobox').filter({ hasText: 'Select members' }).click();
+  await page.getByTestId('group-members-picker').click();
  await page.getByRole('option', { name: 'Admin1' }).click();
  await page.getByRole('option', { name: 'Admin2' }).click();
  await page.getByRole('option', { name: 'Admin3' }).click();
+  // Close the multiselect dropdown so it doesn't overlap the submit button.
+  await page.getByRole('heading', { name: 'Create group' }).click();
  await page.getByTestId('dialog-create-organisation-button').click();
  await expect(page.getByText('Group has been created.').first()).toBeVisible();

@@ -374,17 +382,21 @@ test('[ORGANISATIONS]: manage groups and members', async ({ page }) => {
  await page.getByRole('textbox', { name: 'Group Name *' }).fill('CUSTOM_GROUP_B');
  await page.getByRole('combobox').filter({ hasText: 'Organisation Member' }).click();
  await page.getByRole('option', { name: 'Organisation Admin' }).click();
-  await page.getByRole('combobox').filter({ hasText: 'Select members' }).click();
+  await page.getByTestId('group-members-picker').click();
  await page.getByRole('option', { name: 'Member4' }).click();
  await page.getByRole('option', { name: 'Member5' }).click();
+  // Close the multiselect dropdown so it doesn't overlap the submit button.
+  await page.getByRole('heading', { name: 'Create group' }).click();
  await page.getByTestId('dialog-create-organisation-button').click();
  await expect(page.getByText('Group has been created.').first()).toBeVisible();

  // Assign CUSTOM_GROUP_A to TeamA
  await page.goto(`/t/${teamA}/settings/groups`);
  await page.getByRole('button', { name: 'Add groups' }).click();
-  await page.getByRole('combobox').click();
+  await page.getByTestId('team-groups-picker').click();
  await page.getByRole('option', { name: 'CUSTOM_GROUP_A', exact: true }).click();
+  // Close the multiselect dropdown so it doesn't overlap the Next button.
+  await page.getByRole('heading', { name: 'Add groups' }).click();
  await page.getByRole('button', { name: 'Next' }).click();
  await page.getByRole('combobox').click();
  await page.getByRole('option', { name: 'Manager' }).click();
@@ -394,8 +406,10 @@ test('[ORGANISATIONS]: manage groups and members', async ({ page }) => {
  // Assign CUSTOM_GROUP_B to TeamA
  await page.goto(`/t/${teamA}/settings/groups`);
  await page.getByRole('button', { name: 'Add groups' }).click();
-  await page.getByRole('combobox').click();
+  await page.getByTestId('team-groups-picker').click();
  await page.getByRole('option', { name: 'CUSTOM_GROUP_B', exact: true }).click();
+  // Close the multiselect dropdown so it doesn't overlap the Next button.
+  await page.getByRole('heading', { name: 'Add groups' }).click();
  await page.getByRole('button', { name: 'Next' }).click();
  await page.getByRole('combobox').click();
  await page.getByRole('option', { name: 'Manager' }).click();
@@ -0,0 +1,69 @@
+import { TeamMemberRole } from '@prisma/client';
+
+import { createTeamMembers } from '@documenso/trpc/server/team-router/create-team-members';
+
+import { prisma } from '..';
+import { seedTeam } from './teams';
+
+/**
+ * One-off seed script: creates a team with a large number of members.
+ *
+ * Run via:
+ *   npm run with:env -- tsx packages/prisma/seed/large-team-seed.ts
+ *
+ * Produces:
+ *   - 1 owner
+ *   - ORG_MEMBER_COUNT organisation members
+ *   - TEAM_MEMBER_COUNT of those org members are also added to the team's role group
+ */
+
+const ORG_MEMBER_COUNT = 200;
+const TEAM_MEMBER_COUNT = 50;
+
+const seedLargeTeam = async () => {
+  console.log(`[SEEDING]: Creating team with ${ORG_MEMBER_COUNT} organisation members...`);
+
+  const { owner, team, organisation } = await seedTeam({
+    createTeamMembers: ORG_MEMBER_COUNT,
+  });
+
+  // Exclude the owner — they're already a team member by default.
+  const nonOwnerOrgMembers = organisation.members.filter((member) => member.userId !== owner.id);
+
+  const membersToAttachToTeam = nonOwnerOrgMembers.slice(0, TEAM_MEMBER_COUNT);
+
+  console.log(
+    `[SEEDING]: Attaching ${membersToAttachToTeam.length} org members to the team's role group...`,
+  );
+
+  await createTeamMembers({
+    userId: owner.id,
+    teamId: team.id,
+    membersToCreate: membersToAttachToTeam.map((member) => ({
+      organisationMemberId: member.id,
+      teamRole: TeamMemberRole.MEMBER,
+    })),
+  });
+
+  console.log(`[SEEDING]: Done.`);
+  console.log(`  Owner email:      ${owner.email}`);
+  console.log(`  Owner password:   password`);
+  console.log(`  Organisation:     ${organisation.url} (id ${organisation.id})`);
+  console.log(`  Team URL:         ${team.url} (id ${team.id})`);
+  console.log(`  Org members:      ${ORG_MEMBER_COUNT}`);
+  console.log(`  Team-group members: ${membersToAttachToTeam.length}`);
+};
+
+const main = async () => {
+  try {
+    await seedLargeTeam();
+  } catch (err) {
+    console.error('[SEEDING]: Failed to seed large team.');
+    console.error(err);
+    process.exitCode = 1;
+  } finally {
+    await prisma.$disconnect();
+  }
+};
+
+void main();
@@ -17,8 +17,16 @@ export const findOrganisationGroupsRoute = authenticatedProcedure
  .input(ZFindOrganisationGroupsRequestSchema)
  .output(ZFindOrganisationGroupsResponseSchema)
  .query(async ({ input, ctx }) => {
-    const { organisationId, types, query, page, perPage, organisationGroupId, organisationRoles } =
-      input;
+    const {
+      organisationId,
+      types,
+      query,
+      page,
+      perPage,
+      organisationGroupId,
+      organisationRoles,
+      excludeTeamId,
+    } = input;
    const { user } = ctx;

    ctx.logger.info({
@@ -36,6 +44,7 @@ export const findOrganisationGroupsRoute = authenticatedProcedure
      query,
      page,
      perPage,
+      excludeTeamId,
    });
  });

@@ -48,6 +57,7 @@ type FindOrganisationGroupsOptions = {
  query?: string;
  page?: number;
  perPage?: number;
+  excludeTeamId?: number;
 };

 export const findOrganisationGroups = async ({
@@ -59,6 +69,7 @@ export const findOrganisationGroups = async ({
  query,
  page = 1,
  perPage = 10,
+  excludeTeamId,
 }: FindOrganisationGroupsOptions) => {
  const organisation = await prisma.organisation.findFirst({
    where: buildOrganisationWhereQuery({ organisationId, userId }),
@@ -92,6 +103,14 @@ export const findOrganisationGroups = async ({
    };
  }

+  // Exclude organisation groups that already have a team-group entry pointing
+  // at the given team — i.e. they're already attached.
+  if (excludeTeamId !== undefined) {
+    whereClause.teamGroups = {
+      none: { teamId: excludeTeamId },
+    };
+  }
+
  const [data, count] = await Promise.all([
    prisma.organisationGroup.findMany({
      where: whereClause,
@@ -19,6 +19,12 @@ export const ZFindOrganisationGroupsRequestSchema = ZFindSearchParamsSchema.exte
  organisationGroupId: z.string().optional(),
  organisationRoles: z.nativeEnum(OrganisationMemberRole).array().optional(),
  types: z.nativeEnum(OrganisationGroupType).array().optional(),
+  /**
+   * Exclude organisation groups that are already attached to the given team.
+   * Useful for "add groups to team" pickers so that groups already on the
+   * team don't appear in the dropdown.
+   */
+  excludeTeamId: z.number().optional(),
 });

 export const ZFindOrganisationGroupsResponseSchema = ZFindResultResponse.extend({
@@ -28,6 +28,7 @@ export const findOrganisationMembersRoute = authenticatedProcedure
      query: input.query,
      page: input.page,
      perPage: input.perPage,
+      excludeTeamId: input.excludeTeamId,
    });

    return {
@@ -55,6 +56,7 @@ type FindOrganisationMembersOptions = {
  query?: string;
  page?: number;
  perPage?: number;
+  excludeTeamId?: number;
 };

 export const findOrganisationMembers = async ({
@@ -63,6 +65,7 @@ export const findOrganisationMembers = async ({
  query,
  page = 1,
  perPage = 10,
+  excludeTeamId,
 }: FindOrganisationMembersOptions) => {
  const organisation = await prisma.organisation.findFirst({
    where: buildOrganisationWhereQuery({ organisationId, userId }),
@@ -95,6 +98,21 @@ export const findOrganisationMembers = async ({
    };
  }

+  // Exclude organisation members who are already part of the given team —
+  // i.e. they belong to an organisation group that has a team-group entry
+  // pointing at the team.
+  if (excludeTeamId !== undefined) {
+    whereClause.organisationGroupMembers = {
+      none: {
+        group: {
+          teamGroups: {
+            some: { teamId: excludeTeamId },
+          },
+        },
+      },
+    };
+  }
+
  const [data, count] = await Promise.all([
    prisma.organisationMember.findMany({
      where: whereClause,
@@ -17,6 +17,12 @@ import { OrganisationMemberSchema } from '@documenso/prisma/generated/zod/modelS

 export const ZFindOrganisationMembersRequestSchema = ZFindSearchParamsSchema.extend({
  organisationId: z.string(),
+  /**
+   * Exclude organisation members who are already members of the given team.
+   * Useful for "add members to team" pickers so that members already on the
+   * team don't appear in the dropdown.
+   */
+  excludeTeamId: z.number().optional(),
 });

 export const ZFindOrganisationMembersResponseSchema = ZFindResultResponse.extend({
@@ -65,6 +65,8 @@ export const createTeamGroupsRoute = authenticatedProcedure
      },
    });

+    // Hard validation — these failures indicate programming or authorisation
+    // errors and should reject the whole request.
    const isValid = groups.every((group) => {
      const organisationGroup = team.organisation.groups.find(
        ({ id }) => id === group.organisationGroupId,
@@ -84,11 +86,6 @@ export const createTeamGroupsRoute = authenticatedProcedure
        return false;
      }

-      // Check that the group is not already added to the team.
-      if (organisationGroup.teamGroups.some((teamGroup) => teamGroup.teamId === teamId)) {
-        return false;
-      }
-
      // Check that the user has permission to add the group to the team.
      if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, group.teamRole)) {
        return false;
@@ -103,8 +100,23 @@ export const createTeamGroupsRoute = authenticatedProcedure
      });
    }

+    // Silently drop groups already attached to the team. Makes the create
+    // idempotent for the common race where a group was added between the
+    // picker fetch and the submit.
+    const filteredGroups = groups.filter((group) => {
+      const organisationGroup = team.organisation.groups.find(
+        ({ id }) => id === group.organisationGroupId,
+      );
+
+      return !organisationGroup?.teamGroups.some((teamGroup) => teamGroup.teamId === teamId);
+    });
+
+    if (filteredGroups.length === 0) {
+      return;
+    }
+
    await prisma.teamGroup.createMany({
-      data: groups.map((group) => ({
+      data: filteredGroups.map((group) => ({
        id: generateDatabaseId('team_group'),
        teamId,
        organisationGroupId: group.organisationGroupId,
@@ -146,15 +146,55 @@ export const createTeamMembers = async ({
    });
  }

+  const teamRoleGroupId = (role: TeamMemberRole) =>
+    match(role)
+      .with(TeamMemberRole.MEMBER, () => teamMemberGroup.organisationGroupId)
+      .with(TeamMemberRole.MANAGER, () => teamManagerGroup.organisationGroupId)
+      .with(TeamMemberRole.ADMIN, () => teamAdminGroup.organisationGroupId)
+      .exhaustive();
+
+  // Silently drop additions that would duplicate an existing membership in
+  // the same internal-team role group (the only case that would hit the
+  // (organisationMemberId, groupId) unique constraint). Members who are
+  // implicitly part of the team via an INTERNAL_ORGANISATION group are NOT
+  // dropped, so this still allows assigning an explicit team role on top
+  // of the inherited org-level membership.
+  const existingTeamGroupMemberships = await prisma.organisationGroupMember.findMany({
+    where: {
+      organisationMemberId: {
+        in: membersToCreate.map((member) => member.organisationMemberId),
+      },
+      groupId: {
+        in: [
+          teamMemberGroup.organisationGroupId,
+          teamManagerGroup.organisationGroupId,
+          teamAdminGroup.organisationGroupId,
+        ],
+      },
+    },
+    select: { organisationMemberId: true, groupId: true },
+  });
+
+  const existingPairs = new Set(
+    existingTeamGroupMemberships.map(
+      ({ organisationMemberId, groupId }) => `${organisationMemberId}:${groupId}`,
+    ),
+  );
+
+  const filteredMembersToCreate = membersToCreate.filter(
+    (member) =>
+      !existingPairs.has(`${member.organisationMemberId}:${teamRoleGroupId(member.teamRole)}`),
+  );
+
+  if (filteredMembersToCreate.length === 0) {
+    return;
+  }
+
  await prisma.organisationGroupMember.createMany({
-    data: membersToCreate.map((member) => ({
+    data: filteredMembersToCreate.map((member) => ({
      id: generateDatabaseId('group_member'),
      organisationMemberId: member.organisationMemberId,
-      groupId: match(member.teamRole)
-        .with(TeamMemberRole.MEMBER, () => teamMemberGroup.organisationGroupId)
-        .with(TeamMemberRole.MANAGER, () => teamManagerGroup.organisationGroupId)
-        .with(TeamMemberRole.ADMIN, () => teamAdminGroup.organisationGroupId)
-        .exhaustive(),
+      groupId: teamRoleGroupId(member.teamRole),
    })),
  });
 };