diff --git a/web/src/lib/actions/__test__/focus-trap.spec.ts b/web/src/lib/actions/__test__/focus-trap.spec.ts index be3a97db3f..6ce5ad6d5b 100644 --- a/web/src/lib/actions/__test__/focus-trap.spec.ts +++ b/web/src/lib/actions/__test__/focus-trap.spec.ts @@ -6,19 +6,22 @@ import { tick } from 'svelte'; describe('focusTrap action', () => { const user = userEvent.setup(); - it('sets focus to the first focusable element', () => { + it('sets focus to the first focusable element', async () => { render(FocusTrapTest, { show: true }); + await tick(); expect(document.activeElement).toEqual(screen.getByTestId('one')); }); it('supports backward focus wrapping', async () => { render(FocusTrapTest, { show: true }); + await tick(); await user.keyboard('{Shift>}{Tab}{/Shift}'); expect(document.activeElement).toEqual(screen.getByTestId('three')); }); it('supports forward focus wrapping', async () => { render(FocusTrapTest, { show: true }); + await tick(); screen.getByTestId('three').focus(); await user.keyboard('{Tab}'); expect(document.activeElement).toEqual(screen.getByTestId('one')); @@ -28,9 +31,7 @@ describe('focusTrap action', () => { render(FocusTrapTest, { show: false }); const openButton = screen.getByText('Open'); - openButton.focus(); - openButton.click(); - await tick(); + await user.click(openButton); expect(document.activeElement).toEqual(screen.getByTestId('one')); screen.getByText('Close').click(); diff --git a/web/src/lib/actions/focus-trap.ts b/web/src/lib/actions/focus-trap.ts index c854199600..7483e76099 100644 --- a/web/src/lib/actions/focus-trap.ts +++ b/web/src/lib/actions/focus-trap.ts @@ -1,4 +1,5 @@ import { shortcuts } from '$lib/actions/shortcut'; +import { tick } from 'svelte'; const selectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; @@ -7,7 +8,9 @@ export function focusTrap(container: HTMLElement) { const triggerElement = document.activeElement; const focusableElement = container.querySelector(selectors); - focusableElement?.focus(); + + // Use tick() to ensure focus trap works correctly inside + void tick().then(() => focusableElement?.focus()); const getFocusableElements = (): [HTMLElement | null, HTMLElement | null] => { const focusableElements = container.querySelectorAll(selectors);