From d26aeab32ad90e084d2cec0073df18d811fda820 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 6 Dec 2023 15:59:30 +0000
Subject: [PATCH] Allow modal dialogs in useRovingTabIndex (#4013)

* skip modal dialog elements in useRovingTabIndex

* changeset
---
 .changeset/ten-tables-grin.md     |  5 +++++
 src/TreeView/useRovingTabIndex.ts | 11 +++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 .changeset/ten-tables-grin.md

diff --git a/.changeset/ten-tables-grin.md b/.changeset/ten-tables-grin.md
new file mode 100644
index 00000000000..54167faac4a
--- /dev/null
+++ 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
index 99cc4b9f319..1d93387bec0 100644
--- 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: () => {