Skip to content

test(DropdownMenu): pointer and keyboard hybrid interaction (#1814) #2091

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kotAPI wants to merge 3 commits into
base: main
Choose a base branch
from
+45 −0
Open

test(DropdownMenu): pointer and keyboard hybrid interaction (#1814) #2091

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a54aff5
test(DropdownMenu): cover mixed pointer and keyboard selection paths
kotAPI Jun 24, 2026
d01f1bc
test(DropdownMenu): wait for focus in hybrid interaction tests
kotAPI Jun 24, 2026
0b8e9cf
Merge branch 'main' into test/issue-1814-dropdownmenu-hybrid-interaction
GoldGroove06 Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions src/components/ui/DropdownMenu/tests/DropdownMenu.hybridInteraction.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import DropdownMenu from '../DropdownMenu';

describe('DropdownMenu hybrid interaction', () => {
const menu = () => (
<DropdownMenu.Root>
<DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content>
<DropdownMenu.Item label="One">One</DropdownMenu.Item>
<DropdownMenu.Item label="Two">Two</DropdownMenu.Item>
<DropdownMenu.Item label="Three">Three</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
);

test('pointer open then keyboard navigation selects item', async() => {
const user = userEvent.setup();
render(menu());

await user.click(screen.getByText('Open'));
await user.keyboard('{ArrowDown}{ArrowDown}{Enter}');

await waitFor(() => expect(screen.queryByText('One')).not.toBeInTheDocument());
await waitFor(() => expect(screen.getByText('Open')).toHaveFocus());
});
Comment on lines +20 to +29

@coderabbitai coderabbitai Bot Jun 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Add a positive “menu opened” assertion in the pointer→keyboard flow

This test can pass even if opening breaks: queryByText('One') is only checked after selection, so it already passes when the menu never appears. Assert open state before keyboard selection.

Suggested patch 
     test('pointer open then keyboard navigation selects item', async() => {
         const user = userEvent.setup();
         render(menu());
 
         await user.click(screen.getByText('Open'));
+        expect(await screen.findByText('One')).toBeInTheDocument();
         await user.keyboard('{ArrowDown}{ArrowDown}{Enter}');
 
         await waitFor(() => expect(screen.queryByText('One')).not.toBeInTheDocument());
         await waitFor(() => expect(screen.getByText('Open')).toHaveFocus());
     });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
test('pointer open then keyboard navigation selects item', async() => {
const user = userEvent.setup();
render(menu());
await user.click(screen.getByText('Open'));
await user.keyboard('{ArrowDown}{ArrowDown}{Enter}');
await waitFor(() => expect(screen.queryByText('One')).not.toBeInTheDocument());
await waitFor(() => expect(screen.getByText('Open')).toHaveFocus());
});
test('pointer open then keyboard navigation selects item', async() => {
const user = userEvent.setup();
render(menu());
await user.click(screen.getByText('Open'));
expect(await screen.findByText('One')).toBeInTheDocument();
await user.keyboard('{ArrowDown}{ArrowDown}{Enter}');
await waitFor(() => expect(screen.queryByText('One')).not.toBeInTheDocument());
await waitFor(() => expect(screen.getByText('Open')).toHaveFocus());
});
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ui/DropdownMenu/tests/DropdownMenu.hybridInteraction.test.tsx`
around lines 20 - 29, The pointer-to-keyboard flow test currently only verifies
the menu is gone after selection, so it can miss a broken open state. Update the
test in DropdownMenu.hybridInteraction.test.tsx, around the pointer open and
keyboard navigation sequence in pointer open then keyboard navigation selects
item, to assert the menu is actually open immediately after
user.click(screen.getByText('Open')) and before sending keyboard input. Use the
existing screen queries and the menu item text 'One' to check the positive
opened state, then keep the selection and focus assertions as they are.


test('keyboard open then pointer click selects item', async() => {
const user = userEvent.setup();
render(menu());

const trigger = screen.getByText('Open');
trigger.focus();
await user.keyboard('{ArrowDown}');

await waitFor(() => expect(screen.getByText('One')).toBeInTheDocument());

await user.click(screen.getByText('Three'));
await waitFor(() => expect(screen.queryByText('Three')).not.toBeInTheDocument());
await waitFor(() => expect(trigger).toHaveFocus());
});
});
Loading