From f66751668a49cc797801d6faa3dba324e170c4a0 Mon Sep 17 00:00:00 2001
From: Lucas Smith <me@lucasjamessmith.me>
Date: Thu, 7 May 2026 15:03:38 +1000
Subject: [PATCH] fix: paginate and search member/group pickers (#2768)

---
 .../organisation-group-create-dialog.tsx      |  36 +++---
 .../dialogs/team-group-create-dialog.tsx      |  62 ++++------
 .../dialogs/team-member-create-dialog.tsx     |  60 ++++-----
 ...ganisation-groups-multiselect-combobox.tsx | 115 ++++++++++++++++++
 ...anisation-members-multiselect-combobox.tsx | 112 +++++++++++++++++
 .../o.$orgUrl.settings.groups.$id.tsx         |  47 ++++---
 .../organisations/manage-organisation.spec.ts |  28 +++--
 packages/prisma/seed/large-team-seed.ts       |  69 +++++++++++
 .../find-organisation-groups.ts               |  23 +++-
 .../find-organisation-groups.types.ts         |   6 +
 .../find-organisation-members.ts              |  18 +++
 .../find-organisation-members.types.ts        |   6 +
 .../server/team-router/create-team-groups.ts  |  24 +++-
 .../server/team-router/create-team-members.ts |  52 +++++++-
 14 files changed, 522 insertions(+), 136 deletions(-)
 create mode 100644 apps/remix/app/components/general/organisation-groups-multiselect-combobox.tsx
 create mode 100644 apps/remix/app/components/general/organisation-members-multiselect-combobox.tsx
 create mode 100644 packages/prisma/seed/large-team-seed.ts

diff --git a/apps/remix/app/components/dialogs/organisation-group-create-dialog.tsx b/apps/remix/app/components/dialogs/organisation-group-create-dialog.tsx
index 4f80b318a..e350ff78f 100644
--- a/apps/remix/app/components/dialogs/organisation-group-create-dialog.tsx
+++ b/apps/remix/app/components/dialogs/organisation-group-create-dialog.tsx
@@ -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>
 
diff --git a/apps/remix/app/components/dialogs/team-group-create-dialog.tsx b/apps/remix/app/components/dialogs/team-group-create-dialog.tsx
index 60ebaec4b..ff264da23 100644
--- a/apps/remix/app/components/dialogs/team-group-create-dialog.tsx
+++ b/apps/remix/app/components/dialogs/team-group-create-dialog.tsx
@@ -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>
diff --git a/apps/remix/app/components/dialogs/team-member-create-dialog.tsx b/apps/remix/app/components/dialogs/team-member-create-dialog.tsx
index f9ccf3f5e..31d3ae7c9 100644
--- a/apps/remix/app/components/dialogs/team-member-create-dialog.tsx
+++ b/apps/remix/app/components/dialogs/team-member-create-dialog.tsx
@@ -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>
diff --git a/apps/remix/app/components/general/organisation-groups-multiselect-combobox.tsx b/apps/remix/app/components/general/organisation-groups-multiselect-combobox.tsx
new file mode 100644
index 000000000..cb421d114
--- /dev/null
+++ b/apps/remix/app/components/general/organisation-groups-multiselect-combobox.tsx
@@ -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>
+      }
+    />
+  );
+};
diff --git a/apps/remix/app/components/general/organisation-members-multiselect-combobox.tsx b/apps/remix/app/components/general/organisation-members-multiselect-combobox.tsx
new file mode 100644
index 000000000..257bd0f32
--- /dev/null
+++ b/apps/remix/app/components/general/organisation-members-multiselect-combobox.tsx
@@ -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>
+      }
+    />
+  );
+};
diff --git a/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.groups.$id.tsx b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.groups.$id.tsx
index f3a876dfa..9381b7406 100644
--- a/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.groups.$id.tsx
+++ b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.groups.$id.tsx
@@ -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>
diff --git a/packages/app-tests/e2e/organisations/manage-organisation.spec.ts b/packages/app-tests/e2e/organisations/manage-organisation.spec.ts
index 85cb71764..eccf612cd 100644
--- a/packages/app-tests/e2e/organisations/manage-organisation.spec.ts
+++ b/packages/app-tests/e2e/organisations/manage-organisation.spec.ts
@@ -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();
diff --git a/packages/prisma/seed/large-team-seed.ts b/packages/prisma/seed/large-team-seed.ts
new file mode 100644
index 000000000..04e386e0d
--- /dev/null
+++ b/packages/prisma/seed/large-team-seed.ts
@@ -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();
diff --git a/packages/trpc/server/organisation-router/find-organisation-groups.ts b/packages/trpc/server/organisation-router/find-organisation-groups.ts
index 8dee920e0..d0a026c38 100644
--- a/packages/trpc/server/organisation-router/find-organisation-groups.ts
+++ b/packages/trpc/server/organisation-router/find-organisation-groups.ts
@@ -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,
diff --git a/packages/trpc/server/organisation-router/find-organisation-groups.types.ts b/packages/trpc/server/organisation-router/find-organisation-groups.types.ts
index 549e55d2a..ff61d8534 100644
--- a/packages/trpc/server/organisation-router/find-organisation-groups.types.ts
+++ b/packages/trpc/server/organisation-router/find-organisation-groups.types.ts
@@ -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({
diff --git a/packages/trpc/server/organisation-router/find-organisation-members.ts b/packages/trpc/server/organisation-router/find-organisation-members.ts
index 576003eaa..a71a728ff 100644
--- a/packages/trpc/server/organisation-router/find-organisation-members.ts
+++ b/packages/trpc/server/organisation-router/find-organisation-members.ts
@@ -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,
diff --git a/packages/trpc/server/organisation-router/find-organisation-members.types.ts b/packages/trpc/server/organisation-router/find-organisation-members.types.ts
index 8dbf2c262..c7509dfc0 100644
--- a/packages/trpc/server/organisation-router/find-organisation-members.types.ts
+++ b/packages/trpc/server/organisation-router/find-organisation-members.types.ts
@@ -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({
diff --git a/packages/trpc/server/team-router/create-team-groups.ts b/packages/trpc/server/team-router/create-team-groups.ts
index 162bd57c3..ec4403287 100644
--- a/packages/trpc/server/team-router/create-team-groups.ts
+++ b/packages/trpc/server/team-router/create-team-groups.ts
@@ -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,
diff --git a/packages/trpc/server/team-router/create-team-members.ts b/packages/trpc/server/team-router/create-team-members.ts
index dc7d4d756..739b367ec 100644
--- a/packages/trpc/server/team-router/create-team-members.ts
+++ b/packages/trpc/server/team-router/create-team-members.ts
@@ -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),
     })),
   });
 };