From f0e3ad4b0d0279a70a3c52c8c90f7312c2e69a38 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 4 Dec 2023 16:46:02 +0000 Subject: [PATCH 1/2] skip modal dialog elements in useRovingTabIndex --- src/TreeView/useRovingTabIndex.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) 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: () => { From abe0e19904ed8efd08f6efc3d6f4a13640971a1f Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 4 Dec 2023 17:30:59 +0000 Subject: [PATCH 2/2] changeset --- .changeset/ten-tables-grin.md | 5 +++++ 1 file changed, 5 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