refactor: generic getShadowRoots + addEvent for non-composed events

Address PR review feedback. Replace the scroll-specific
addGlobalScrollListener with a generic getShadowRoots(node) helper plus
the addEvent utility, since the shadow-DOM event-propagation problem
applies to all non-composed events, not just scroll.

addEvent and the EventMapType/EventTargetType type helpers are pulled in
from #10102 verbatim and placed at the same locations so the overlap
auto-resolves when #10102 lands.

Callers (ScrollView, both useCloseOnScroll copies) now use:
  addEvent(window/document, 'scroll', listener, true)
  addEvent(getShadowRoots(ref.current), 'scroll', listener, true)

Select.browser.test now opens the ComboBox via the @react-aria/test-utils
combobox tester instead of dispatching raw PointerEvents.

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

Author: pzaczkiewicz-athenahealth

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

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+import {addEvent} from 'react-aria/private/utils/domHelpers';
 import {
-  addGlobalScrollListener,
   getEventTarget,
+  getShadowRoots,
   nodeContains
 } from 'react-aria/private/utils/shadowdom/DOMFunctions';
 import {RefObject} from '@react-types/shared';
@@ -67,6 +68,11 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
       }
     };
 
-    return addGlobalScrollListener(window, triggerRef.current, onScroll, true);
+    let cleanupGlobal = addEvent(window, 'scroll', onScroll, true);
+    let cleanupShadow = addEvent(getShadowRoots(triggerRef.current), 'scroll', onScroll, true);
+    return () => {
+      cleanupGlobal();
+      cleanupShadow();
+    };
   }, [isOpen, onClose, triggerRef]);
 }

packages/@react-types/shared/src/events.d.ts

@@ -13,6 +13,20 @@
 import {FocusableElement} from './dom';
 import {FocusEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, SyntheticEvent} from 'react';
 
+// Type helper to extract the target element type from an event
+export type EventTargetType<T> = T extends SyntheticEvent<infer E, any> ? E : EventTarget;
+
+// Type helper to extract the event map from a target
+export type EventMapType<T extends EventTarget> = T extends Window
+  ? WindowEventMap
+  : T extends Document
+    ? DocumentEventMap
+    : T extends Element
+      ? HTMLElementEventMap
+      : T extends VisualViewport
+        ? VisualViewportEventMap
+        : GlobalEventHandlersEventMap;
+
 // Event bubbling can be problematic in real-world applications, so the default for React Spectrum components
 // is not to propagate. This can be overridden by calling continuePropagation() on the event.
 export type BaseEvent<T extends SyntheticEvent> = T & {

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

@@ -28,6 +28,7 @@ import {Label} from '../src/Label';
 import {ListBox, ListBoxItem} from '../src/ListBox';
 import {Popover} from '../src/Popover';
 import React from 'react';
+import {User} from '@react-aria/test-utils';
 
 function TestComboBox() {
   return (
@@ -57,36 +58,26 @@ function makeScrollableContainer() {
   return {scrollable, mountPoint};
 }
 
-async function openComboBox(container: Element) {
-  let button = container.querySelector('button') as HTMLButtonElement;
-  button.dispatchEvent(
-    new PointerEvent('pointerdown', {bubbles: true, cancelable: true, isPrimary: true})
-  );
-  button.dispatchEvent(
-    new PointerEvent('pointerup', {bubbles: true, cancelable: true, isPrimary: true})
-  );
-  button.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}));
-  await new Promise<void>(resolve => setTimeout(resolve, 100));
-}
-
 it('overlay closes when a scrollable light DOM ancestor scrolls', async () => {
+  let testUtilUser = new User();
   let {scrollable, mountPoint} = makeScrollableContainer();
   document.body.appendChild(scrollable);
 
   let root = createRoot(mountPoint);
   root.render(<TestComboBox />);
   await new Promise<void>(resolve => setTimeout(resolve, 100));
 
-  await openComboBox(scrollable);
+  let comboboxTester = testUtilUser.createTester('ComboBox', {root: scrollable});
+  await comboboxTester.open();
 
   // ComboBox listbox renders into document.body via portal.
-  expect(document.querySelector('[role="listbox"]')).not.toBeNull();
+  expect(comboboxTester.getListbox()).not.toBeNull();
 
   // Scroll the ancestor that contains the trigger — window capturing listener should close the overlay.
   scrollable.dispatchEvent(new Event('scroll'));
   await new Promise<void>(resolve => setTimeout(resolve, 100));
 
-  expect(document.querySelector('[role="listbox"]')).toBeNull();
+  expect(comboboxTester.getListbox()).toBeNull();
 
   root.unmount();
   document.body.removeChild(scrollable);
@@ -101,6 +92,7 @@ describe('Shadow DOM', () => {
   enableShadowDOM();
 
   it('overlay closes when a scrollable shadow DOM ancestor scrolls', async () => {
+    let testUtilUser = new User();
     let outerHost = document.createElement('div');
     document.body.appendChild(outerHost);
     let shadowRoot = outerHost.attachShadow({mode: 'open'});
@@ -112,18 +104,19 @@ describe('Shadow DOM', () => {
     root.render(<TestComboBox />);
     await new Promise<void>(resolve => setTimeout(resolve, 100));
 
-    await openComboBox(scrollable);
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: scrollable});
+    await comboboxTester.open();
 
     // Listbox renders into document.body via portal even in shadow DOM mode.
-    expect(document.querySelector('[role="listbox"]')).not.toBeNull();
+    expect(comboboxTester.getListbox()).not.toBeNull();
 
     // Scroll inside the shadow root.
     // Without the fix, window never sees this event (composed: false).
-    // With the fix (addGlobalScrollListener), the shadow root listener closes the overlay.
+    // With the fix (getShadowRoots + addEvent), the shadow root listener closes the overlay.
     scrollable.dispatchEvent(new Event('scroll'));
     await new Promise<void>(resolve => setTimeout(resolve, 100));
 
-    expect(document.querySelector('[role="listbox"]')).toBeNull();
+    expect(comboboxTester.getListbox()).toBeNull();
 
     root.unmount();
     document.body.removeChild(outerHost);

packages/react-aria/exports/private/utils/domHelpers.ts

@@ -1 +1,6 @@
-export {getOwnerDocument, getOwnerWindow, isShadowRoot} from '../../../src/utils/domHelpers';
+export {
+  addEvent,
+  getOwnerDocument,
+  getOwnerWindow,
+  isShadowRoot
+} from '../../../src/utils/domHelpers';

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

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

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

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

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

@@ -1,3 +1,5 @@
+import type {EventMapType} from '@react-types/shared';
+
 export const getOwnerDocument = (el: Element | null | undefined): Document => {
   return el?.ownerDocument ?? document;
 };
@@ -32,3 +34,29 @@ function isNode(value: unknown): value is Node {
 export function isShadowRoot(node: Node | null): node is ShadowRoot {
   return isNode(node) && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
 }
+
+/**
+ * Attaches an event listener on target(s) and returns a cleanup function.
+ */
+export function addEvent<T extends EventTarget, K extends keyof EventMapType<Exclude<T, null>>>(
+  target: T | EventTarget[] | null,
+  event: Extract<K, string> | (string & {}),
+  listener?: (this: T, ev: EventMapType<Exclude<T, null>>[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): () => void {
+  if (listener == null || target == null) {
+    return () => {};
+  }
+
+  let eventTargets = Array.isArray(target) ? target : [target];
+
+  for (let eventTarget of eventTargets) {
+    eventTarget.addEventListener(event, listener as EventListener, options);
+  }
+
+  return () => {
+    for (let eventTarget of eventTargets) {
+      eventTarget.removeEventListener(event, listener as EventListener, options);
+    }
+  };
+}

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

@@ -84,43 +84,25 @@ export function getEventTarget<T extends Event | SyntheticEvent>(event: T): Even
 }
 
 /**
- * Adds a scroll listener to a global target (window or document).
- * When shadow DOM mode is enabled, also attaches a capturing listener to each
- * shadow root in the ancestor chain of refElement, since scroll events have
- * composed: false and do not propagate out of shadow roots.
+ * Collects the enclosing ShadowRoots between a node and the document.
  *
- * Returns a cleanup function that removes all attached listeners.
+ * 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.
  */
-export function addGlobalScrollListener(
-  globalTarget: Window | Document,
-  refElement: Element | null,
-  listener: EventListener,
-  options?: boolean | AddEventListenerOptions
-): () => void {
-  globalTarget.addEventListener('scroll', listener, options);
-
-  let shadowRoots: ShadowRoot[] = [];
-  if (shadowDOM() && refElement) {
-    let node: Node | null = refElement;
-    while (node) {
-      if (isShadowRoot(node)) {
-        shadowRoots.push(node as ShadowRoot);
-        node = (node as ShadowRoot).host;
-      } else {
-        node = node.parentNode;
-      }
-    }
-    for (let root of shadowRoots) {
-      root.addEventListener('scroll', listener, options);
-    }
+export function getShadowRoots(node: Node | null | undefined): ShadowRoot[] {
+  if (!shadowDOM()) {
+    return [];
   }
 
-  return () => {
-    globalTarget.removeEventListener('scroll', listener, options);
-    for (let root of shadowRoots) {
-      root.removeEventListener('scroll', listener, options);
-    }
-  };
+  let roots: ShadowRoot[] = [];
+  let current: Node | null = node?.getRootNode() ?? null;
+
+  while (isShadowRoot(current)) {
+    roots.push(current);
+    current = current.host.getRootNode();
+  }
+
+  return roots;
 }
 
 /**

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

@@ -10,13 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {
-  addGlobalScrollListener,
-  getEventTarget,
-  nodeContains
-} from '../utils/shadowdom/DOMFunctions';
-
+import {addEvent} from '../utils/domHelpers';
 import {flushSync} from 'react-dom';
+import {getEventTarget, getShadowRoots, nodeContains} from '../utils/shadowdom/DOMFunctions';
 import {getScrollLeft} from './utils';
 import {Point, Rect, Size} from 'react-stately/useVirtualizerState';
 import React, {
@@ -225,7 +221,12 @@ 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(() => {
-    return addGlobalScrollListener(document, ref.current, onScroll, true);
+    let cleanupGlobal = addEvent(document, 'scroll', onScroll, true);
+    let cleanupShadow = addEvent(getShadowRoots(ref.current), 'scroll', onScroll, true);
+    return () => {
+      cleanupGlobal();
+      cleanupShadow();
+    };
   }, [onScroll, ref]);
 
   useEffect(() => {