Allow modal dialogs in useRovingTabIndex (#4013)

* skip modal dialog elements in useRovingTabIndex * changeset
primer · Dec 6, 2023 · d26aeab · d26aeab
1 parent 4321d59
commit d26aeab
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/.changeset/ten-tables-grin.md b/.changeset/ten-tables-grin.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Avoid error when using Modal Dialog within TreeView
diff --git a/src/TreeView/useRovingTabIndex.ts b/src/TreeView/useRovingTabIndex.ts
@@ -22,6 +22,17 @@ export function useRovingTabIndex({
     getNextFocusable: (direction, from, event) => {
       if (!(from instanceof HTMLElement)) return
 
+      // Skip elements within a modal dialog
+      // This need to be in a try/catch to avoid errors in
+      // non-supported browsers
+      try {
+        if (from.closest('dialog:modal')) {
+          return
+        }
+      } catch {
+        // Don't return
+      }
+
       return getNextFocusableElement(from, event) ?? from
     },
     focusInStrategy: () => {