refactor: merge getShadowRoots into getEventTargets, single addEvent per caller

Collapse the per-caller two-addEvent-calls pattern to one. getShadowRoots
is replaced by getEventTargets(global, refNode), which returns
[global, ...shadowRoots] as a single EventTarget[] (addEvent already
accepts arrays and returns one combined cleanup).

getEventTargets only collects the shadow roots that lie strictly between
refNode and global, stopping at global's own root node so it works
correctly even when a non-window/document node is passed as global.

addEvent's body stays byte-for-byte identical to #10102; only its JSDoc
gains a note about composed:false events (scroll, scrollend) and when to
use getEventTargets, so the implementation still auto-merges with #10102.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: pzaczkiewicz-athenahealth

packages/@adobe/react-spectrum/src/menu/useCloseOnScroll.ts

@@ -13,7 +13,7 @@
 import {addEvent} from 'react-aria/private/utils/domHelpers';
 import {
   getEventTarget,
-  getShadowRoots,
+  getEventTargets,
   nodeContains
 } from 'react-aria/private/utils/shadowdom/DOMFunctions';
 import {RefObject} from '@react-types/shared';
@@ -68,11 +68,6 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
       }
     };
 
-    let cleanupGlobal = addEvent(window, 'scroll', onScroll, true);
-    let cleanupShadow = addEvent(getShadowRoots(triggerRef.current), 'scroll', onScroll, true);
-    return () => {
-      cleanupGlobal();
-      cleanupShadow();
-    };
+    return addEvent(getEventTargets(window, triggerRef.current), 'scroll', onScroll, true);
   }, [isOpen, onClose, triggerRef]);
 }

packages/react-aria-components/test/Select.browser.test.tsx

@@ -112,7 +112,7 @@ describe('Shadow DOM', () => {
 
     // Scroll inside the shadow root.
     // Without the fix, window never sees this event (composed: false).
-    // With the fix (getShadowRoots + addEvent), the shadow root listener closes the overlay.
+    // With the fix (getEventTargets + addEvent), the shadow root listener closes the overlay.
     scrollable.dispatchEvent(new Event('scroll'));
     await new Promise<void>(resolve => setTimeout(resolve, 100));
 

packages/react-aria/exports/private/utils/shadowdom/DOMFunctions.ts

@@ -1,6 +1,6 @@
 export {
   getEventTarget,
-  getShadowRoots,
+  getEventTargets,
   nodeContains,
   isFocusWithin,
   getActiveElement

packages/react-aria/src/overlays/useCloseOnScroll.ts

@@ -11,7 +11,7 @@
  */
 
 import {addEvent} from '../utils/domHelpers';
-import {getEventTarget, getShadowRoots, nodeContains} from '../utils/shadowdom/DOMFunctions';
+import {getEventTarget, getEventTargets, nodeContains} from '../utils/shadowdom/DOMFunctions';
 import {RefObject} from '@react-types/shared';
 import {useEffect} from 'react';
 
@@ -61,11 +61,6 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
       }
     };
 
-    let cleanupGlobal = addEvent(window, 'scroll', onScroll, true);
-    let cleanupShadow = addEvent(getShadowRoots(triggerRef.current), 'scroll', onScroll, true);
-    return () => {
-      cleanupGlobal();
-      cleanupShadow();
-    };
+    return addEvent(getEventTargets(window, triggerRef.current), 'scroll', onScroll, true);
   }, [isOpen, onClose, triggerRef]);
 }

packages/react-aria/src/utils/domHelpers.ts

@@ -37,6 +37,13 @@ export function isShadowRoot(node: Node | null): node is ShadowRoot {
 
 /**
  * Attaches an event listener on target(s) and returns a cleanup function.
+ *
+ * Some events are `composed: false` and do not propagate out of shadow roots,
+ * even in the capture phase — notably `scroll` and `scrollend`. For those, a
+ * listener on `window`/`document` alone will miss scrolls that happen inside a
+ * shadow root. Pass the array from `getEventTargets(global, refNode)`
+ * (react-aria/private/utils/shadowdom/DOMFunctions) as `target` so the listener
+ * is attached to the global target *and* every enclosing shadow root.
  */
 export function addEvent<T extends EventTarget, K extends keyof EventMapType<Exclude<T, null>>>(
   target: T | EventTarget[] | null,

packages/react-aria/src/utils/shadowdom/DOMFunctions.ts

@@ -84,25 +84,38 @@ export function getEventTarget<T extends Event | SyntheticEvent>(event: T): Even
 }
 
 /**
- * Collects the enclosing ShadowRoots between a node and the document.
+ * Returns the set of event targets a listener must be attached to for an event
+ * to be observed at `global`, given an element `refNode` that may live inside
+ * one or more shadow roots.
  *
- * Useful for attaching listeners for events that don't compose (e.g. scroll),
- * since those events do not propagate out of shadow roots even in the capture phase.
+ * Returns `[global, ...shadowRoots]`, where shadowRoots are the ShadowRoots
+ * enclosing `refNode` that lie between it and `global`. Needed for events that
+ * don't compose (e.g. scroll, scrollend), which do not propagate out of shadow
+ * roots even in the capture phase. Pass the result straight to `addEvent`.
  */
-export function getShadowRoots(node: Node | null | undefined): ShadowRoot[] {
-  if (!shadowDOM()) {
-    return [];
+export function getEventTargets(
+  global: EventTarget,
+  refNode: Node | null | undefined
+): EventTarget[] {
+  let targets: EventTarget[] = [global];
+  if (!shadowDOM() || refNode == null) {
+    return targets;
   }
 
-  let roots: ShadowRoot[] = [];
-  let current: Node | null = node?.getRootNode() ?? null;
+  // The root `global` itself lives in. The event already reaches `global` once
+  // it is inside this root, so we must NOT collect this root or anything above
+  // it — only the shadow roots strictly between `refNode` and `global`.
+  // `window` has no getRootNode; its boundary is the document, which the walk
+  // reaches naturally (the document is not a ShadowRoot, so the loop exits).
+  let globalRoot = 'getRootNode' in global ? (global as Node).getRootNode() : null;
+  let current: Node | null = refNode.getRootNode() ?? null;
 
-  while (isShadowRoot(current)) {
-    roots.push(current);
+  while (isShadowRoot(current) && current !== globalRoot) {
+    targets.push(current);
     current = current.host.getRootNode();
   }
 
-  return roots;
+  return targets;
 }
 
 /**

packages/react-aria/src/virtualizer/ScrollView.tsx

@@ -12,7 +12,7 @@
 
 import {addEvent} from '../utils/domHelpers';
 import {flushSync} from 'react-dom';
-import {getEventTarget, getShadowRoots, nodeContains} from '../utils/shadowdom/DOMFunctions';
+import {getEventTarget, getEventTargets, nodeContains} from '../utils/shadowdom/DOMFunctions';
 import {getScrollLeft} from './utils';
 import {Point, Rect, Size} from 'react-stately/useVirtualizerState';
 import React, {
@@ -221,12 +221,7 @@ export function useScrollView(
   // When inside a shadow DOM, also attach to each shadow root in the ancestor chain since scroll
   // events have composed: false and don't propagate out of shadow roots.
   useEffect(() => {
-    let cleanupGlobal = addEvent(document, 'scroll', onScroll, true);
-    let cleanupShadow = addEvent(getShadowRoots(ref.current), 'scroll', onScroll, true);
-    return () => {
-      cleanupGlobal();
-      cleanupShadow();
-    };
+    return addEvent(getEventTargets(document, ref.current), 'scroll', onScroll, true);
   }, [onScroll, ref]);
 
   useEffect(() => {