fix: Virtualizer, useCloseOnScroll are able to work in the shadow DOM (#10093)

Author: pzaczkiewicz-athenahealth

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

@@ -10,7 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {getEventTarget, nodeContains} from 'react-aria/private/utils/shadowdom/DOMFunctions';
+import {addEvent} from 'react-aria/private/utils/domHelpers';
+import {
+  getEventTarget,
+  getEventTargets,
+  nodeContains
+} from 'react-aria/private/utils/shadowdom/DOMFunctions';
 import {RefObject} from '@react-types/shared';
 import {useEffect} from 'react';
 
@@ -63,9 +68,6 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
       }
     };
 
-    window.addEventListener('scroll', onScroll, true);
-    return () => {
-      window.removeEventListener('scroll', onScroll, true);
-    };
+    return addEvent(getEventTargets(window, triggerRef.current), 'scroll', onScroll, true);
   }, [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

@@ -0,0 +1,124 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Regression tests for https://github.com/adobe/react-spectrum/issues/10093
+// Verifies that overlays close when a scrollable ancestor scrolls, both in
+// light DOM and inside a shadow DOM (where scroll events have composed: false).
+//
+// Uses ComboBox which sets isNonModal: true so its Popover registers a
+// window.addEventListener('scroll', ...) via useCloseOnScroll — the same
+// hook that is affected by the shadow DOM scroll propagation bug.
+
+import {Button} from '../src/Button';
+import {ComboBox} from '../src/ComboBox';
+import {createRoot} from 'react-dom/client';
+import {enableShadowDOM} from 'react-stately/private/flags/flags';
+import {expect, it} from 'vitest';
+import {Input} from '../src/Input';
+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 (
+    <ComboBox aria-label="Favorite Animal">
+      <Label>Favorite Animal</Label>
+      <Input />
+      <Button>▼</Button>
+      <Popover>
+        <ListBox>
+          <ListBoxItem id="cat">Cat</ListBoxItem>
+          <ListBoxItem id="dog">Dog</ListBoxItem>
+          <ListBoxItem id="kangaroo">Kangaroo</ListBoxItem>
+        </ListBox>
+      </Popover>
+    </ComboBox>
+  );
+}
+
+function makeScrollableContainer() {
+  let scrollable = document.createElement('div');
+  scrollable.style.cssText = 'height: 100px; overflow-y: auto;';
+  let inner = document.createElement('div');
+  inner.style.height = '500px';
+  scrollable.appendChild(inner);
+  let mountPoint = document.createElement('div');
+  inner.appendChild(mountPoint);
+  return {scrollable, mountPoint};
+}
+
+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));
+
+  let comboboxTester = testUtilUser.createTester('ComboBox', {root: scrollable});
+  await comboboxTester.open();
+
+  // ComboBox listbox renders into document.body via portal.
+  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(comboboxTester.getListbox()).toBeNull();
+
+  root.unmount();
+  document.body.removeChild(scrollable);
+});
+
+describe('Shadow DOM', () => {
+  /**
+   * EnableShadowDOM must be called before mounting.
+   *
+   * Cannot be turned off, so should be called after light-dom tests.
+   */
+  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'});
+
+    let {scrollable, mountPoint} = makeScrollableContainer();
+    shadowRoot.appendChild(scrollable);
+
+    let root = createRoot(mountPoint);
+    root.render(<TestComboBox />);
+    await new Promise<void>(resolve => setTimeout(resolve, 100));
+
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: scrollable});
+    await comboboxTester.open();
+
+    // Listbox renders into document.body via portal even in shadow DOM mode.
+    expect(comboboxTester.getListbox()).not.toBeNull();
+
+    // Scroll inside the shadow root.
+    // Without the fix, window never sees this event (composed: false).
+    // 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));
+
+    expect(comboboxTester.getListbox()).toBeNull();
+
+    root.unmount();
+    document.body.removeChild(outerHost);
+  });
+});

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

@@ -0,0 +1,86 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Regression test for https://github.com/adobe/react-spectrum/issues/10093
+
+import {createRoot} from 'react-dom/client';
+import {enableShadowDOM} from 'react-stately/private/flags/flags';
+import {expect, it} from 'vitest';
+import {ListLayout} from 'react-stately/useVirtualizerState';
+import React from 'react';
+import {Tree, TreeItem, TreeItemContent} from '../src/Tree';
+import {Virtualizer} from '../src/Virtualizer';
+
+// Mirror what the reproduction does — must be set before mounting.
+enableShadowDOM();
+
+const ROW_HEIGHT = 30;
+const CONTAINER_HEIGHT = 300;
+const items = Array.from({length: 50}, (_, i) => ({id: `item-${i}`, name: `Item ${i}`}));
+
+function VirtualizedTree() {
+  return (
+    <Virtualizer layout={ListLayout} layoutOptions={{rowHeight: ROW_HEIGHT}}>
+      <Tree
+        aria-label="Shadow DOM tree"
+        items={items}
+        style={{
+          display: 'block',
+          height: `${CONTAINER_HEIGHT}px`,
+          width: '300px',
+          overflow: 'auto'
+        }}>
+        {(item: any) => (
+          <TreeItem id={item.id} textValue={item.name}>
+            <TreeItemContent>{item.name}</TreeItemContent>
+          </TreeItem>
+        )}
+      </Tree>
+    </Virtualizer>
+  );
+}
+
+it('virtualizer inside shadow DOM updates visible items on scroll', async () => {
+  let host = document.createElement('div');
+  document.body.appendChild(host);
+  let shadowRoot = host.attachShadow({mode: 'open'});
+  let mountPoint = document.createElement('div');
+  shadowRoot.appendChild(mountPoint);
+
+  let root = createRoot(mountPoint);
+  root.render(<VirtualizedTree />);
+  // Wait for initial render, ResizeObserver measurement, and ScrollView's size update.
+  await new Promise<void>(resolve => setTimeout(() => resolve(), 200));
+
+  // The scrollport is the treegrid element (Tree's outer div with overflow: auto).
+  // The [role="presentation"] div is the inner content container, not the scrollport.
+  let scrollport = shadowRoot.querySelector<HTMLElement>('[role="treegrid"]');
+  expect(scrollport).not.toBeNull();
+  expect(scrollport!.scrollHeight).toBeGreaterThan(CONTAINER_HEIGHT);
+
+  let rows = shadowRoot.querySelectorAll('[role="row"]');
+  expect(rows.length).toBeGreaterThan(0);
+  // Only a subset of items should be visible (not all 50) due to virtualization.
+  expect(rows.length).toBeLessThan(items.length);
+  expect(Array.from(rows).some(r => r.textContent?.includes('Item 0'))).toBe(true);
+
+  // Scroll past 20 items (20 × 30px) so Item 0 is outside any extra items the layout may buffer.
+  scrollport!.scrollTop = ROW_HEIGHT * 20;
+  await new Promise<void>(resolve => setTimeout(() => resolve(), 200));
+
+  let updatedRows = shadowRoot.querySelectorAll('[role="row"]');
+  expect(Array.from(updatedRows).some(r => r.textContent?.includes('Item 0'))).toBe(false);
+  expect(Array.from(updatedRows).some(r => r.textContent?.includes('Item 20'))).toBe(true);
+
+  root.unmount();
+  document.body.removeChild(host);
+});

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,5 +1,6 @@
 export {
   getEventTarget,
+  getEventTargets,
   nodeContains,
   isFocusWithin,
   getActiveElement

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

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {getEventTarget, nodeContains} from '../utils/shadowdom/DOMFunctions';
+import {addEvent} from '../utils/domHelpers';
+import {getEventTarget, getEventTargets, nodeContains} from '../utils/shadowdom/DOMFunctions';
 import {RefObject} from '@react-types/shared';
 import {useEffect} from 'react';
 
@@ -60,9 +61,6 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
       }
     };
 
-    window.addEventListener('scroll', onScroll, true);
-    return () => {
-      window.removeEventListener('scroll', onScroll, true);
-    };
+    return addEvent(getEventTargets(window, triggerRef.current), 'scroll', onScroll, true);
   }, [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,36 @@ 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.
+ *
+ * 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,
+  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

@@ -83,6 +83,41 @@ export function getEventTarget<T extends Event | SyntheticEvent>(event: T): Even
   return event.target as EventTargetType<T>;
 }
 
+/**
+ * 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.
+ *
+ * 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 getEventTargets(
+  global: EventTarget,
+  refNode: Node | null | undefined
+): EventTarget[] {
+  let targets: EventTarget[] = [global];
+  if (!shadowDOM() || refNode == null) {
+    return targets;
+  }
+
+  // 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) && current !== globalRoot) {
+    targets.push(current);
+    current = current.host.getRootNode();
+  }
+
+  return targets;
+}
+
 /**
  * ShadowDOM safe fast version of node.contains(document.activeElement).
  *