@react-aria/focus 3.8.0 → 3.10.0

package/src/FocusScope.tsx

@@ -13,7 +13,7 @@
 import {FocusableElement} from '@react-types/shared';
 import {focusSafely} from './focusSafely';
 import {isElementVisible} from './isElementVisible';
-import React, {ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
+import React, {ReactNode, RefObject, useContext, useEffect, useMemo, useRef} from 'react';
 import {useLayoutEffect} from '@react-aria/utils';
 
 
@@ -85,8 +85,12 @@ export function FocusScope(props: FocusScopeProps) {
   let endRef = useRef<HTMLSpanElement>();
   let scopeRef = useRef<Element[]>([]);
   let ctx = useContext(FocusContext);
-  // if there is no scopeRef on the context, then the parent is the focusScopeTree's root, represented by null
-  let parentScope = ctx?.scopeRef ?? null;
+
+  // The parent scope is based on the JSX tree, using context.
+  // However, if a new scope mounts outside the active scope (e.g. DialogContainer launched from a menu),
+  // we want the parent scope to be the active scope instead.
+  let ctxParent = ctx?.scopeRef ?? null;
+  let parentScope = useMemo(() => activeScope && focusScopeTree.getTreeNode(activeScope) && !isAncestorScope(activeScope, ctxParent) ? activeScope : ctxParent, [ctxParent]);
 
   useLayoutEffect(() => {
     // Find all rendered nodes between the sentinels and add them to the scope.
@@ -109,14 +113,18 @@ export function FocusScope(props: FocusScopeProps) {
   let node = focusScopeTree.getTreeNode(scopeRef);
   node.contain = contain;
 
+  useActiveScopeTracker(scopeRef, restoreFocus, contain);
   useFocusContainment(scopeRef, contain);
   useRestoreFocus(scopeRef, restoreFocus, contain);
   useAutoFocus(scopeRef, autoFocus);
 
   // this layout effect needs to run last so that focusScopeTree cleanup happens at the last moment possible
   useLayoutEffect(() => {
-    if (scopeRef && (parentScope || parentScope == null)) {
+    if (scopeRef) {
       return () => {
+        // Scope may have been re-parented.
+        let parentScope = focusScopeTree.getTreeNode(scopeRef).parent.scopeRef;
+
         // Restore the active scope on unmount if this scope or a descendant scope is active.
         // Parent effect cleanups run before children, so we need to check if the
         // parent scope actually still exists before restoring the active scope to it.
@@ -294,7 +302,7 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain: boolean) {
     let onFocus = (e) => {
       // If focusing an element in a child scope of the currently active scope, the child becomes active.
       // Moving out of the active scope to an ancestor is not allowed.
-      if (!activeScope || isAncestorScope(activeScope, scopeRef)) {
+      if ((!activeScope || isAncestorScope(activeScope, scopeRef)) && isElementInScope(e.target, scopeRef.current)) {
         activeScope = scopeRef;
         focusedNode.current = e.target;
       } else if (shouldContainFocus(scopeRef) && !isElementInChildScope(e.target, scopeRef)) {
@@ -368,6 +376,11 @@ function isElementInChildScope(element: Element, scope: ScopeRef = null) {
   return false;
 }
 
+/** @private */
+export function isElementInChildOfActiveScope(element: Element) {
+  return isElementInChildScope(element, activeScope);
+}
+
 function isAncestorScope(ancestor: ScopeRef, scope: ScopeRef) {
   let parent = focusScopeTree.getTreeNode(scope)?.parent;
   while (parent) {
@@ -424,6 +437,47 @@ function useAutoFocus(scopeRef: RefObject<Element[]>, autoFocus: boolean) {
   }, [scopeRef]);
 }
 
+function useActiveScopeTracker(scopeRef: RefObject<Element[]>, restore: boolean, contain: boolean) {
+  // tracks the active scope, in case restore and contain are both false.
+  // if either are true, this is tracked in useRestoreFocus or useFocusContainment.
+  useLayoutEffect(() => {
+    if (restore || contain) {
+      return;
+    }
+
+    let scope = scopeRef.current;
+
+    let onFocus = (e: FocusEvent) => {
+      let target = e.target as Element;
+      if (isElementInScope(target, scopeRef.current)) {
+        activeScope = scopeRef;
+      } else if (!isElementInAnyScope(target)) {
+        activeScope = null;
+      }
+    };
+
+    document.addEventListener('focusin', onFocus, false);
+    scope.forEach(element => element.addEventListener('focusin', onFocus, false));
+    return () => {
+      document.removeEventListener('focusin', onFocus, false);
+      scope.forEach(element => element.removeEventListener('focusin', onFocus, false));
+    };
+  }, [scopeRef, restore, contain]);
+}
+
+function shouldRestoreFocus(scopeRef: ScopeRef) {
+  let scope = focusScopeTree.getTreeNode(activeScope);
+  while (scope && scope.scopeRef !== scopeRef) {
+    if (scope.nodeToRestore) {
+      return false;
+    }
+
+    scope = scope.parent;
+  }
+
+  return scope?.scopeRef === scopeRef;
+}
+
 function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean, contain: boolean) {
   // create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
   const nodeToRestoreRef = useRef(typeof document !== 'undefined' ? document.activeElement as FocusableElement : null);
@@ -450,15 +504,17 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean,
       document.removeEventListener('focusin', onFocus, false);
       scope.forEach(element => element.removeEventListener('focusin', onFocus, false));
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scopeRef, contain]);
 
   // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
   useLayoutEffect(() => {
-    focusScopeTree.getTreeNode(scopeRef).nodeToRestore = nodeToRestoreRef.current;
     if (!restoreFocus) {
       return;
     }
 
+    focusScopeTree.getTreeNode(scopeRef).nodeToRestore = nodeToRestoreRef.current;
+
     // Handle the Tab key so that tabbing out of the scope goes to the next element
     // after the node that had focus when the scope mounted. This is important when
     // using portals for overlays, so that focus goes to the expected element when
@@ -528,8 +584,9 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean,
         restoreFocus
         && nodeToRestore
         && (
+          // eslint-disable-next-line react-hooks/exhaustive-deps
           isElementInScope(document.activeElement, scopeRef.current)
-          || (document.activeElement === document.body && activeScope === scopeRef)
+          || (document.activeElement === document.body && shouldRestoreFocus(scopeRef))
         )
       ) {
         // freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
@@ -546,6 +603,17 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean,
               }
               treeNode = treeNode.parent;
             }
+
+            // If no nodeToRestore was found, focus the first element in the nearest
+            // ancestor scope that is still in the tree.
+            treeNode = clonedTree.getTreeNode(scopeRef);
+            while (treeNode) {
+              if (treeNode.scopeRef && focusScopeTree.getTreeNode(treeNode.scopeRef)) {
+                focusFirstInScope(treeNode.scopeRef.current, true);
+                return;
+              }
+              treeNode = treeNode.parent;
+            }
           }
         });
       }

package/src/index.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager} from './FocusScope';
+export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager, isElementInChildOfActiveScope} from './FocusScope';
 export {FocusRing} from './FocusRing';
 export {FocusableProvider, useFocusable} from './useFocusable';
 export {useFocusRing} from './useFocusRing';