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 (
-
+
);
};