@carlonicora/nextjs-jsonapi 4.0.7 → 4.0.8

package/src/features/how-to/components/containers/HowToCommand.spec.tsx

@@ -1,7 +1,7 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { ReactElement } from "react";
-import { beforeAll, describe, expect, it, vi } from "vitest";
+import { ReactElement, useCallback, useMemo, useState } from "react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 
 import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
 import { SidebarProvider } from "../../../../shadcnui";
@@ -25,9 +25,10 @@ const guides = [
   },
 ];
 
-const { useDataListRetriever } = vi.hoisted(() => ({
-  useDataListRetriever: vi.fn(() => ({ data: guides, search: vi.fn(), refresh: vi.fn() })),
-}));
+const { useDataListRetriever, defaultRetriever } = vi.hoisted(() => {
+  const defaultRetriever = () => ({ data: guides, search: () => {}, refresh: () => {} });
+  return { useDataListRetriever: vi.fn(defaultRetriever), defaultRetriever };
+});
 
 vi.mock("../../../../hooks", async (importOriginal) => ({
   ...(await importOriginal<typeof import("../../../../hooks")>()),
@@ -36,6 +37,14 @@ vi.mock("../../../../hooks", async (importOriginal) => ({
 }));
 vi.mock("next-intl", () => ({ useTranslations: () => (key: string) => key }));
 
+const { viewerSpy } = vi.hoisted(() => ({ viewerSpy: vi.fn() }));
+vi.mock("./HowToCommandViewer", () => ({
+  default: ({ howTo }: { howTo: { id: string } }) => {
+    viewerSpy(howTo);
+    return <div data-testid="howto-viewer" />;
+  },
+}));
+
 beforeAll(() => {
   ModuleRegistry.register("HowTo" as any, { name: "howtos", model: HowTo } as any);
 });
@@ -70,3 +79,67 @@ describe("HowToCommand relevance", () => {
     expect(relevant).not.toHaveTextContent("Guida contatti");
   });
 });
+
+// Two guides with the SAME title: cmdk derives an item's value from its text when no
+// `value` is given, so without a unique value both rows highlight together.
+describe("HowToCommand same-titled guides", () => {
+  const sameTitled = [
+    { id: "s1", name: "Come creare una pratica", pages: "[]", contextualKeys: [], draft: false },
+    { id: "s2", name: "Come creare una pratica", pages: "[]", contextualKeys: [], draft: false },
+    { id: "s3", name: "Gestire i contatti", pages: "[]", contextualKeys: [], draft: false },
+  ];
+  const searchSpy = vi.fn();
+
+  beforeAll(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+  });
+
+  afterEach(() => {
+    useDataListRetriever.mockImplementation(defaultRetriever);
+    searchSpy.mockReset();
+  });
+
+  function useFakeRetriever() {
+    const [data, setData] = useState<any[]>(sameTitled);
+    const search = useCallback(async (term: string) => {
+      searchSpy(term);
+      setData(sameTitled.filter((g) => g.name.toLowerCase().includes(term.toLowerCase())));
+    }, []);
+    return useMemo(() => ({ data, search, refresh: () => {} }), [data, search]);
+  }
+
+  it("highlights only one of two same-titled guides and opens the one clicked", async () => {
+    useDataListRetriever.mockImplementation(useFakeRetriever as any);
+    renderCommand(<HowToCommand pathname="/anything" />);
+    await open();
+    const list = await screen.findByRole("listbox");
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    const rows = within(list).getAllByRole("option", { name: "Come creare una pratica" });
+    expect(rows).toHaveLength(2);
+    await userEvent.click(rows[1]);
+    // The viewer opens on the clicked guide: the dialog title becomes its name, and
+    // HowToCommandViewer receives guide s2.
+    expect(await screen.findByRole("heading", { name: "Come creare una pratica" })).toBeInTheDocument();
+    expect(viewerSpy).toHaveBeenLastCalledWith(expect.objectContaining({ id: "s2" }));
+  });
+
+  it("still filters the list when the user types", async () => {
+    useDataListRetriever.mockImplementation(useFakeRetriever as any);
+    renderCommand(<HowToCommand pathname="/anything" />);
+    await open();
+    const list = await screen.findByRole("listbox");
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("combobox"), "contatti");
+
+    await waitFor(() => expect(searchSpy).toHaveBeenCalledWith("contatti"));
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1));
+    expect(within(list).getByRole("option", { name: "Gestire i contatti" })).toBeInTheDocument();
+  });
+});

package/src/features/how-to/components/containers/HowToCommand.tsx

@@ -189,7 +189,12 @@ export default function HowToCommand({ pathname, contextKeys, extraGroups, onSta
                 {relevantHowTos.length > 0 && (
                   <CommandGroup heading={t(`howto.command.relevant`)}>
                     {relevantHowTos.map((howTo: HowToInterface) => (
-                      <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
+                      <CommandItem
+                        key={howTo.id}
+                        value={howTo.id}
+                        onSelect={() => setSelectedHowTo(howTo)}
+                        className="cursor-pointer"
+                      >
                         <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                         <span>{howTo.name}</span>
                       </CommandItem>
@@ -201,7 +206,12 @@ export default function HowToCommand({ pathname, contextKeys, extraGroups, onSta
                 {otherHowTos.length > 0 && (
                   <CommandGroup heading={searchTerm ? undefined : t(`howto.command.all`)}>
                     {otherHowTos.map((howTo: HowToInterface) => (
-                      <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
+                      <CommandItem
+                        key={howTo.id}
+                        value={howTo.id}
+                        onSelect={() => setSelectedHowTo(howTo)}
+                        className="cursor-pointer"
+                      >
                         <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                         <span>{howTo.name}</span>
                       </CommandItem>

package/src/features/how-to/components/forms/HowToSelector.spec.tsx

@@ -0,0 +1,85 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Two guides with the SAME title: cmdk derives an item's value from its text when no
+// `value` is given, so without a unique value both rows highlight together.
+const guides = [
+  { id: "h1", name: "Come creare una pratica" },
+  { id: "h2", name: "Come creare una pratica" },
+  { id: "h3", name: "Gestire i contatti" },
+];
+
+const { searchSpy } = vi.hoisted(() => ({ searchSpy: vi.fn() }));
+
+vi.mock("../../../../hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../hooks")>()),
+  // Stands in for the server-side search: `search(term)` narrows the list by title.
+  useDataListRetriever: () => {
+    const [data, setData] = useState<any[]>(guides);
+    const search = useCallback(async (term: string) => {
+      searchSpy(term);
+      setData(guides.filter((g) => g.name.toLowerCase().includes(term.toLowerCase())));
+    }, []);
+    return useMemo(() => ({ data, search }), [data, search]);
+  },
+  useDebounce: (fn: any) => fn,
+}));
+
+import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
+import { HowTo } from "../../data/HowTo";
+import HowToSelector from "./HowToSelector";
+
+beforeAll(() => {
+  ModuleRegistry.register("HowTo" as any, { name: "howtos", model: HowTo } as any);
+});
+
+let formRef: any;
+function Host() {
+  const form = useForm<{ howTo?: { id: string } }>();
+  useEffect(() => {
+    formRef = form;
+  });
+  return <HowToSelector id="howTo" form={form} placeholder="pick" />;
+}
+
+async function openList() {
+  render(<Host />);
+  await userEvent.click(screen.getByText("pick"));
+  return screen.findByRole("listbox");
+}
+
+describe("HowToSelector", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    searchSpy.mockReset();
+  });
+
+  it("highlights only one of two same-titled guides and selects the one clicked", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    const sameTitled = within(list).getAllByRole("option", { name: "Come creare una pratica" });
+    expect(sameTitled).toHaveLength(2);
+    await userEvent.click(sameTitled[1]);
+    expect(formRef.getValues("howTo")).toEqual({ id: "h2", name: "Come creare una pratica" });
+  });
+
+  it("still filters the list when the user types", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("textbox"), "contatti");
+
+    await waitFor(() => expect(searchSpy).toHaveBeenCalledWith("contatti"));
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1));
+    expect(within(list).getByRole("option", { name: "Gestire i contatti" })).toBeInTheDocument();
+  });
+});

package/src/features/how-to/components/forms/HowToSelector.tsx

@@ -148,6 +148,7 @@ export default function HowToSelector({
                       <CommandItem
                         className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                         key={howTo.id}
+                        value={howTo.id}
                         onSelect={() => setHowTo(howTo)}
                       >
                         {howTo.name}

package/src/features/role/components/forms/UserRoleAdd.spec.tsx

@@ -0,0 +1,71 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Every row's text is `t("role.roles", { role })`. A role id the translation does not
+// know renders the same fallback text, so two roles can share a row text — and cmdk,
+// without a `value`, derives the value from that text and highlights both rows.
+// (The test translator returns the key, so every row reads "role.roles".)
+const roles = [
+  { id: "role-a", name: "Role A" },
+  { id: "role-b", name: "Role B" },
+  { id: "role-c", name: "Role C" },
+];
+
+const { findAllRolesUserNotIn, addUserToRole } = vi.hoisted(() => ({
+  findAllRolesUserNotIn: vi.fn(),
+  addUserToRole: vi.fn(),
+}));
+
+vi.mock("../../data/role.service", () => ({ RoleService: { findAllRolesUserNotIn, addUserToRole } }));
+vi.mock("../../../../utils/toast", () => ({ showToast: vi.fn() }));
+vi.mock("../../../../hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../hooks")>()),
+  useDebounce: (fn: any) => fn,
+}));
+
+import { UserRoleAdd } from "./UserRoleAdd";
+
+const user = { id: "user-1", name: "Mario Rossi" } as any;
+
+async function openList() {
+  render(<UserRoleAdd user={user} refresh={vi.fn(async () => {})} />);
+  await userEvent.click(screen.getByRole("button", { name: /common.association.label/ }));
+  return screen.findByRole("listbox");
+}
+
+describe("UserRoleAdd", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    findAllRolesUserNotIn.mockReset();
+    addUserToRole.mockReset();
+    findAllRolesUserNotIn.mockImplementation(async (params: { search: string }) =>
+      roles.filter((r) => r.id.includes(params.search)),
+    );
+    addUserToRole.mockResolvedValue(undefined);
+  });
+
+  it("highlights only one of two same-text roles and adds the one clicked", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    await userEvent.click(within(list).getAllByRole("option")[1]);
+    await waitFor(() => expect(addUserToRole).toHaveBeenCalled());
+    expect(addUserToRole.mock.calls.every(([p]) => p.roleId === "role-b" && p.userId === "user-1")).toBe(true);
+  });
+
+  it("still filters the list when the user types", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("combobox"), "role-c");
+
+    await waitFor(() => expect(findAllRolesUserNotIn).toHaveBeenCalledWith({ search: "role-c", userId: "user-1" }));
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1));
+  });
+});

package/src/features/role/components/forms/UserRoleAdd.tsx

@@ -115,6 +115,7 @@ export function UserRoleAdd({ user, refresh }: UserRoleAddProps) {
               <CommandItem
                 className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                 key={role.id}
+                value={role.id}
                 onSelect={() => addUserToRole(role)}
                 onClick={() => addUserToRole(role)}
               >

package/src/features/user/components/forms/UserSelector.spec.tsx

@@ -0,0 +1,85 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Two users with the SAME name: cmdk derives an item's value from its text when no
+// `value` is given, so without a unique value both rows highlight together.
+const users = [
+  { id: "u1", name: "Mario Rossi", avatar: "a1" },
+  { id: "u2", name: "Mario Rossi", avatar: "a2" },
+  { id: "u3", name: "Anna Bianchi", avatar: "a3" },
+];
+
+const { searchSpy } = vi.hoisted(() => ({ searchSpy: vi.fn() }));
+
+vi.mock("../../../../hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../hooks")>()),
+  // Stands in for the server-side search: `search(term)` narrows the list by name.
+  useDataListRetriever: () => {
+    const [data, setData] = useState<any[]>(users);
+    const search = useCallback(async (term: string) => {
+      searchSpy(term);
+      setData(users.filter((u) => u.name.toLowerCase().includes(term.toLowerCase())));
+    }, []);
+    return useMemo(() => ({ data, search }), [data, search]);
+  },
+  useDebounce: (fn: any) => fn,
+}));
+vi.mock("../widgets", () => ({ UserAvatar: () => null }));
+
+import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
+import { UserSelector } from "./UserSelector";
+
+beforeAll(() => {
+  ModuleRegistry.register("User" as any, { name: "users" } as any);
+});
+
+let formRef: any;
+function Host() {
+  const form = useForm<{ user?: { id: string } }>();
+  useEffect(() => {
+    formRef = form;
+  });
+  return <UserSelector id="user" form={form} placeholder="pick" />;
+}
+
+async function openList() {
+  render(<Host />);
+  await userEvent.click(screen.getByText("pick"));
+  return screen.findByRole("listbox");
+}
+
+describe("UserSelector", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    searchSpy.mockReset();
+  });
+
+  it("highlights only one of two same-named users and selects the one clicked", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    const sameNamed = within(list).getAllByRole("option", { name: "Mario Rossi" });
+    expect(sameNamed).toHaveLength(2);
+    await userEvent.click(sameNamed[1]);
+    expect(formRef.getValues("user")).toEqual({ id: "u2", name: "Mario Rossi", avatar: "a2" });
+  });
+
+  it("still filters the list when the user types", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("textbox"), "anna");
+
+    await waitFor(() => expect(searchSpy).toHaveBeenCalledWith("anna"));
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1));
+    expect(within(list).getByRole("option", { name: "Anna Bianchi" })).toBeInTheDocument();
+  });
+});

package/src/features/user/components/forms/UserSelector.tsx

@@ -154,6 +154,7 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
                       <CommandItem
                         className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                         key={user.id}
+                        value={user.id}
                         onSelect={() => setUser(user)}
                       >
                         <UserAvatar user={user} className={`me-2 h-4 w-4`} />

package/src/features/user/components/lists/UserListInAdd.spec.tsx

@@ -0,0 +1,84 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useCallback, useMemo, useState } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Two users whose row text is identical (same name, same e-mail — e.g. a re-invited
+// duplicate): cmdk derives an item's value from its text when no `value` is given, so
+// without a unique value both rows highlight together.
+const users = [
+  { id: "u1", name: "Mario Rossi", email: "mario@example.com" },
+  { id: "u2", name: "Mario Rossi", email: "mario@example.com" },
+  { id: "u3", name: "Anna Bianchi", email: "anna@example.com" },
+];
+
+const { searchSpy } = vi.hoisted(() => ({ searchSpy: vi.fn() }));
+
+vi.mock("../../../../hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../hooks")>()),
+  useDebounce: (fn: any) => fn,
+}));
+vi.mock("../widgets", () => ({ UserAvatar: () => null }));
+
+import { CommonAssociationCommandDialog } from "../../../../components/forms/CommonAssociationForm";
+import { UserListInAdd } from "./UserListInAdd";
+
+// The list is always rendered inside CommonAssociationCommandDialog (see RoleUserAdd),
+// which owns the search input; `search(term)` stands in for the server-side search.
+function Host({ setSelectedUser }: { setSelectedUser: (user: any) => void }) {
+  const [list, setList] = useState<any[]>(users);
+  const search = useCallback(async (term: string) => {
+    searchSpy(term);
+    setList(users.filter((u) => u.name.toLowerCase().includes(term.toLowerCase())));
+  }, []);
+  const data = useMemo(() => ({ data: list, search }) as any, [list, search]);
+  return (
+    <CommonAssociationCommandDialog
+      show={true}
+      setShow={vi.fn()}
+      data={data}
+      source="users"
+      destination="roles"
+      destinationName="Admin"
+    >
+      <UserListInAdd data={data} existingUsers={[]} setSelectedUser={setSelectedUser} />
+    </CommonAssociationCommandDialog>
+  );
+}
+
+describe("UserListInAdd", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    searchSpy.mockReset();
+  });
+
+  it("highlights only one of two same-text users and selects the one clicked", async () => {
+    const setSelectedUser = vi.fn();
+    render(<Host setSelectedUser={setSelectedUser} />);
+    const list = await screen.findByRole("listbox");
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    const sameText = within(list).getAllByRole("option", { name: /Mario Rossi/ });
+    expect(sameText).toHaveLength(2);
+    await userEvent.click(sameText[1]);
+    expect(setSelectedUser).toHaveBeenCalled();
+    expect(setSelectedUser.mock.calls.every(([u]) => u.id === "u2")).toBe(true);
+  });
+
+  it("still filters the list when the user types", async () => {
+    render(<Host setSelectedUser={vi.fn()} />);
+    const list = await screen.findByRole("listbox");
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("combobox"), "anna");
+
+    await waitFor(() => expect(searchSpy).toHaveBeenCalledWith("anna"));
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1));
+    expect(within(list).getByRole("option", { name: /Anna Bianchi/ })).toBeInTheDocument();
+  });
+});

package/src/features/user/components/lists/UserListInAdd.tsx

@@ -28,6 +28,7 @@ export function UserListInAdd({ data, existingUsers, setSelectedUser, setLevelOp
                 <CommandItem
                   className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                   key={user.id}
+                  value={user.id}
                   onClick={(_e) => {
                     setSelectedUser(user);
                     setLevelOpen?.(true);

package/src/features/user/components/widgets/UserSearchPopover.spec.tsx

@@ -0,0 +1,68 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Two users with the SAME name: cmdk derives an item's value from its text when no
+// `value` is given, so without a unique value both rows highlight together.
+const users = [
+  { id: "u1", name: "Mario Rossi" },
+  { id: "u2", name: "Mario Rossi" },
+  { id: "u3", name: "Anna Bianchi" },
+];
+
+const { findMany } = vi.hoisted(() => ({ findMany: vi.fn() }));
+
+// The real useUserSearch runs; only the API call underneath it is stubbed.
+vi.mock("../../data/user.service", () => ({ UserService: { findMany } }));
+vi.mock("./UserAvatar", () => ({ UserAvatar: () => null }));
+
+import { UserSearchPopover } from "./UserSearchPopover";
+
+async function openList(onSelect = vi.fn()) {
+  render(
+    <UserSearchPopover onSelect={onSelect}>
+      <span>open</span>
+    </UserSearchPopover>,
+  );
+  await userEvent.click(screen.getByText("open"));
+  return screen.findByRole("listbox");
+}
+
+describe("UserSearchPopover", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    findMany.mockReset();
+    findMany.mockImplementation(async (params: { search?: string }) =>
+      users.filter((u) => u.name.toLowerCase().includes((params.search ?? "").toLowerCase())),
+    );
+  });
+
+  it("highlights only one of two same-named users and selects the one clicked", async () => {
+    const onSelect = vi.fn();
+    const list = await openList(onSelect);
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    const sameNamed = within(list).getAllByRole("option", { name: "Mario Rossi" });
+    expect(sameNamed).toHaveLength(2);
+    await userEvent.click(sameNamed[1]);
+    expect(onSelect).toHaveBeenCalledWith("u2");
+  });
+
+  it("still filters the list when the user types", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("textbox"), "anna");
+
+    await waitFor(() => expect(findMany).toHaveBeenCalledWith(expect.objectContaining({ search: "anna" })), {
+      timeout: 3000,
+    });
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1), { timeout: 3000 });
+    expect(within(list).getByRole("option", { name: "Anna Bianchi" })).toBeInTheDocument();
+  });
+});

package/src/features/user/components/widgets/UserSearchPopover.tsx

@@ -71,6 +71,7 @@ export const UserSearchPopover = ({ children, onSelect, align = "start", classNa
               users.map((user) => (
                 <CommandItem
                   key={user.id}
+                  value={user.id}
                   className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                   onSelect={() => handleSelectUser(user.id)}
                 >

package/src/shadcnui/custom/multi-select.spec.tsx

@@ -0,0 +1,70 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { MultiSelect } from "./multi-select";
+
+// Two options with the SAME label: cmdk derives an item's value from its text when no
+// `value` is given, so without a unique value both rows highlight together.
+const options = [
+  { label: "Mario Rossi", value: "u1" },
+  { label: "Mario Rossi", value: "u2" },
+  { label: "Anna Bianchi", value: "u3" },
+];
+
+async function openList(onValueChange = vi.fn()) {
+  render(<MultiSelect options={options} onValueChange={onValueChange} placeholder="pick" />);
+  await userEvent.click(screen.getByText("pick"));
+  return screen.findByRole("listbox");
+}
+
+const highlightedRows = (list: HTMLElement) =>
+  within(list)
+    .getAllByRole("option")
+    .filter((o) => o.getAttribute("aria-selected") === "true");
+
+describe("MultiSelect", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+  });
+
+  it("highlights only one of two same-labelled options and toggles the one clicked", async () => {
+    const onValueChange = vi.fn();
+    const list = await openList(onValueChange);
+
+    // "(Select All)" starts highlighted; one step down lands on the first "Mario Rossi".
+    await userEvent.keyboard("{ArrowDown}");
+    const highlighted = highlightedRows(list);
+    expect(highlighted).toHaveLength(1);
+    expect(highlighted[0]).toHaveTextContent("Mario Rossi");
+
+    const sameLabelled = within(list).getAllByRole("option", { name: "Mario Rossi" });
+    expect(sameLabelled).toHaveLength(2);
+    await userEvent.click(sameLabelled[1]);
+    expect(onValueChange).toHaveBeenLastCalledWith(["u2"]);
+  });
+
+  it("still filters by the option label when the user types", async () => {
+    const list = await openList();
+    await userEvent.type(screen.getByPlaceholderText("Search..."), "anna");
+
+    await waitFor(() => expect(within(list).queryAllByRole("option", { name: "Mario Rossi" })).toHaveLength(0));
+    expect(within(list).getByRole("option", { name: "Anna Bianchi" })).toBeInTheDocument();
+    expect(within(list).queryByRole("option", { name: "(Select All)" })).toBeNull();
+  });
+
+  it("does not match an option by its raw value, only by its label (as before)", async () => {
+    const list = await openList();
+    await userEvent.type(screen.getByPlaceholderText("Search..."), "u3");
+
+    await waitFor(() => expect(within(list).queryByRole("option", { name: "Anna Bianchi" })).toBeNull());
+  });
+
+  it("keeps the static rows searchable by their text", async () => {
+    const list = await openList();
+    await userEvent.type(screen.getByPlaceholderText("Search..."), "select all");
+
+    await waitFor(() => expect(within(list).queryAllByRole("option", { name: "Mario Rossi" })).toHaveLength(0));
+    expect(within(list).getByRole("option", { name: "(Select All)" })).toBeInTheDocument();
+  });
+});