Workaround tabIndex=-1 added to document body by SvelteKit

This ends up producing a lot of extra focus events that normally would not exist. Fixes #36 Fixes #39
rgossiaux · Jan 22, 2022 · bc809ef · bc809ef
1 parent ac1f86a
commit bc809ef
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/src/lib/components/focus-trap/FocusTrap.svelte b/src/lib/components/focus-trap/FocusTrap.svelte
@@ -109,6 +109,10 @@
 
   // Prevent programmatically escaping
   function handleWindowFocus(event: FocusEvent) {
+    if (event.target === window.document.body) {
+      // Workaround for a SvelteKit issue: https://github.com/sveltejs/kit/issues/3501
+      return;
+    }
     if (!enabled) return;
     if (containers.size !== 1) return;
     if (destroying) return;

diff --git a/src/lib/components/popover/Popover.svelte b/src/lib/components/popover/Popover.svelte
@@ -137,7 +137,11 @@
   onMount(() => registerPopover?.(registerBag));
 
   // Handle focus out
-  function handleFocus() {
+  function handleFocus(event: FocusEvent) {
+    if (event.target === window.document.body) {
+      // Workaround for a SvelteKit issue: https://github.com/sveltejs/kit/issues/3501
+      return;
+    }
     if (popoverState !== PopoverStates.Open) return;
     if (isFocusWithinPopoverGroup()) return;
     if (!button) return;

diff --git a/src/lib/components/popover/PopoverButton.svelte b/src/lib/components/popover/PopoverButton.svelte
@@ -42,7 +42,11 @@
   let previousActiveElementRef: Element | null =
     typeof window === "undefined" ? null : document.activeElement;
 
-  function handleFocus() {
+  function handleFocus(event: FocusEvent) {
+    if (event.target === window.document.body) {
+      // Workaround for a SvelteKit issue: https://github.com/sveltejs/kit/issues/3501
+      return;
+    }
     previousActiveElementRef = activeElementRef;
     activeElementRef = document.activeElement;
   }

diff --git a/src/lib/components/popover/PopoverPanel.svelte b/src/lib/components/popover/PopoverPanel.svelte
@@ -99,7 +99,11 @@
     }
   }
 
-  function handleFocus() {
+  function handleFocus(event: FocusEvent) {
+    if (event.target === window.document.body) {
+      // Workaround for a SvelteKit issue: https://github.com/sveltejs/kit/issues/3501
+      return;
+    }
     if (!focus) return;
     if ($api.popoverState !== PopoverStates.Open) return;
     if (!$panelStore) return;