diff --git a/packages/elements/__tests__/mic-selector.test.tsx b/packages/elements/__tests__/mic-selector.test.tsx index 5da920bf..961691c9 100644 --- a/packages/elements/__tests__/mic-selector.test.tsx +++ b/packages/elements/__tests__/mic-selector.test.tsx @@ -637,6 +637,95 @@ describe("micSelector", () => { expect(onValueChange).toHaveBeenCalledWith("device-2"); }); }); + + it("does not change value when hovering or arrowing through items", async () => { + setupMocks(); + const user = userEvent.setup(); + const onValueChange = vi.fn(); + + // Mock scrollIntoView for command + vi.spyOn(Element.prototype, "scrollIntoView").mockImplementation(vi.fn()); + + render( + + + + + + + + {(devices) => + devices.map((device) => ( + + {device.label} + + )) + } + + + + ); + + await user.click(screen.getByRole("button")); + + await waitFor(() => { + expect(screen.getByText("External Microphone")).toBeInTheDocument(); + }); + + await user.hover(screen.getByText("External Microphone")); + await user.keyboard("{ArrowDown}{ArrowUp}"); + + expect(onValueChange).not.toHaveBeenCalled(); + expect( + screen.getByRole("button", { name: MACBOOK_PRO_MIC_REGEX }) + ).toBeInTheDocument(); + }); + + it("commits value exactly once on keyboard activation and closes popover", async () => { + setupMocks(); + const user = userEvent.setup(); + const onValueChange = vi.fn(); + + // Mock scrollIntoView for command + vi.spyOn(Element.prototype, "scrollIntoView").mockImplementation(vi.fn()); + + render( + + + + + + + + {(devices) => + devices.map((device) => ( + + {device.label} + + )) + } + + + + ); + + await user.click(screen.getByRole("button")); + + await waitFor(() => { + expect(screen.getByText("External Microphone")).toBeInTheDocument(); + }); + + await user.keyboard("{ArrowDown}{Enter}"); + + expect(onValueChange).toHaveBeenCalledOnce(); + expect(onValueChange).toHaveBeenCalledWith("device-2"); + + await waitFor(() => { + expect( + screen.queryByPlaceholderText("Search microphones...") + ).not.toBeInTheDocument(); + }); + }); }); describe("micSelectorTrigger", () => { diff --git a/packages/elements/src/mic-selector.tsx b/packages/elements/src/mic-selector.tsx index 44528226..ad608291 100644 --- a/packages/elements/src/mic-selector.tsx +++ b/packages/elements/src/mic-selector.tsx @@ -256,7 +256,7 @@ export const MicSelectorContent = ({ popoverOptions, ...props }: MicSelectorContentProps) => { - const { width, onValueChange, value } = useContext(MicSelectorContext); + const { width, value } = useContext(MicSelectorContext); return ( - + ); };