diff --git a/frontend/src/lib/components/PersonTypeahead.svelte.spec.ts b/frontend/src/lib/components/PersonTypeahead.svelte.spec.ts index 6f5971bf..644d9a4a 100644 --- a/frontend/src/lib/components/PersonTypeahead.svelte.spec.ts +++ b/frontend/src/lib/components/PersonTypeahead.svelte.spec.ts @@ -397,6 +397,25 @@ describe('PersonTypeahead – keyboard navigation', () => { 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 () => { mockFetchWithPersons([ {