feat(focus-scope): use get-deep-active-element to cross the shadow DOM boundary

Author: cpsoinos

packages/react/focus-scope/package.json

@@ -34,6 +34,7 @@
     "build": "radix-build"
   },
   "dependencies": {
+    "@radix-ui/deep-active-element": "workspace:*",
     "@radix-ui/react-compose-refs": "workspace:*",
     "@radix-ui/react-primitive": "workspace:*",
     "@radix-ui/react-use-callback-ref": "workspace:*"

packages/react/focus-scope/src/focus-scope.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { Primitive } from '@radix-ui/react-primitive';
 import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
+import { getDeepActiveElement } from '@radix-ui/deep-active-element'
 
 const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
 const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
@@ -109,7 +110,7 @@ const FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>((props,
       // back to the document.body. In this case, we move focus to the container
       // to keep focus trapped correctly.
       function handleMutations(mutations: MutationRecord[]) {
-        const focusedElement = document.activeElement as HTMLElement | null;
+        const focusedElement = getDeepActiveElement() as HTMLElement | null;
         if (focusedElement !== document.body) return;
         for (const mutation of mutations) {
           if (mutation.removedNodes.length > 0) focus(container);
@@ -132,7 +133,7 @@ const FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>((props,
   React.useEffect(() => {
     if (container) {
       focusScopesStack.add(focusScope);
-      const previouslyFocusedElement = document.activeElement as HTMLElement | null;
+      const previouslyFocusedElement = getDeepActiveElement() as HTMLElement | null;
       const hasFocusedCandidate = container.contains(previouslyFocusedElement);
 
       if (!hasFocusedCandidate) {
@@ -141,7 +142,7 @@ const FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>((props,
         container.dispatchEvent(mountEvent);
         if (!mountEvent.defaultPrevented) {
           focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
-          if (document.activeElement === previouslyFocusedElement) {
+          if (getDeepActiveElement() === previouslyFocusedElement) {
             focus(container);
           }
         }
@@ -176,7 +177,7 @@ const FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>((props,
       if (focusScope.paused) return;
 
       const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
-      const focusedElement = document.activeElement as HTMLElement | null;
+      const focusedElement = getDeepActiveElement() as HTMLElement | null;
 
       if (isTabKey && focusedElement) {
         const container = event.currentTarget as HTMLElement;
@@ -216,10 +217,10 @@ FocusScope.displayName = FOCUS_SCOPE_NAME;
  * Stops when focus has actually moved.
  */
 function focusFirst(candidates: HTMLElement[], { select = false } = {}) {
-  const previouslyFocusedElement = document.activeElement;
+  const previouslyFocusedElement = getDeepActiveElement();
   for (const candidate of candidates) {
     focus(candidate, { select });
-    if (document.activeElement !== previouslyFocusedElement) return;
+    if (getDeepActiveElement() !== previouslyFocusedElement) return;
   }
 }
 
@@ -290,7 +291,7 @@ function isSelectableInput(element: any): element is FocusableTarget & { select:
 function focus(element?: FocusableTarget | null, { select = false } = {}) {
   // only focus if that element is focusable
   if (element && element.focus) {
-    const previouslyFocusedElement = document.activeElement;
+    const previouslyFocusedElement = getDeepActiveElement();
     // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
     element.focus({ preventScroll: true });
     // only select if its not the same element, it supports selection and we need to select