fix(web): focus trap inside portal (#11797)

* fix(web): focus trap inside portal * fix tests
immich-app · Aug 15, 2024 · fa64277 · fa64277
1 parent f7bfde6
commit fa64277
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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<HTMLElement>(selectors);
-  focusableElement?.focus();
+
+  // Use tick() to ensure focus trap works correctly inside <Portal />
+  void tick().then(() => focusableElement?.focus());
 
   const getFocusableElements = (): [HTMLElement | null, HTMLElement | null] => {
     const focusableElements = container.querySelectorAll<HTMLElement>(selectors);