Radio ScopeTab (shift+tab) _ts_fix

mantinedev · Sep 24, 2023 · a7a36e0 · a7a36e0
1 parent f01899d
commit a7a36e0
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/mantine-hooks/src/use-focus-trap/scope-tab.ts b/src/mantine-hooks/src/use-focus-trap/scope-tab.ts
@@ -8,7 +8,20 @@ export function scopeTab(node: HTMLElement, event: KeyboardEvent) {
   }
   const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
   const root = node.getRootNode() as unknown as DocumentOrShadowRoot;
-  const leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement;
+  let leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement;
+
+  // Handle the case of the active element being in a RadioGroup with the finalTabbable element
+  const activeElement = root.activeElement as Element;
+  const activeElementIsRadio =
+    activeElement.tagName === 'INPUT' && activeElement.getAttribute('type') === 'radio';
+  if (activeElementIsRadio) {
+    const activeRadioGroup = tabbable.filter(
+      (element) =>
+        element.getAttribute('type') === 'radio' &&
+        element.getAttribute('name') === activeElement.getAttribute('name')
+    );
+    leavingFinalTabbable = activeRadioGroup.includes(finalTabbable);
+  }
 
   if (!leavingFinalTabbable) {
     return;