fix(persons): fix person dropdown clipping with fixed positioning and ARIA (#343) #350
@@ -397,6 +397,25 @@ describe('PersonTypeahead – keyboard navigation', () => {
|
|||||||
await expect.element(lastOption).toHaveAttribute('aria-selected', 'true');
|
await expect.element(lastOption).toHaveAttribute('aria-selected', 'true');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('ArrowDown from last wraps to first option', async () => {
|
||||||
|
mockFetchWithPersons();
|
||||||
|
render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
|
||||||
|
const input = page.getByPlaceholder('Namen tippen...');
|
||||||
|
await input.fill('Mu');
|
||||||
|
await waitForDebounce();
|
||||||
|
|
||||||
|
await input.click();
|
||||||
|
await userEvent.keyboard('{ArrowDown}'); // highlight first (index 0)
|
||||||
|
await tick();
|
||||||
|
await userEvent.keyboard('{ArrowDown}'); // highlight second (index 1 = last)
|
||||||
|
await tick();
|
||||||
|
await userEvent.keyboard('{ArrowDown}'); // wrap to first (index 0)
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
const firstOption = page.getByRole('option', { name: 'Max Mustermann' });
|
||||||
|
await expect.element(firstOption).toHaveAttribute('aria-selected', 'true');
|
||||||
|
});
|
||||||
|
|
||||||
it('Enter selects the highlighted option', async () => {
|
it('Enter selects the highlighted option', async () => {
|
||||||
mockFetchWithPersons([
|
mockFetchWithPersons([
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user