Skip to content

feat: Add Shadow DOM support for useOverlay and improve event handling #7751

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat: Add Shadow DOM support for useOverlay and improve event handling #7751

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c37229e
feat: Add Shadow DOM support for useOverlay and improve event handling
ritz078 Feb 9, 2025
f09384a
chore: Organize imports in useOverlay
ritz078 Feb 9, 2025
6c1a00e
chore: Move @react-stately/flags to devDependencies in overlays package
ritz078 Feb 26, 2025
da35a42
Fix formatting
ritz078 Feb 26, 2025
96a3364
chore: Improve test formatting for useOverlay events
ritz078 Feb 26, 2025
e6e839c
Merge branch 'main' into ritesh/overlay-shadow-root
snowystinger Aug 4, 2025
42cc5cb
fix test
snowystinger Aug 4, 2025
bd82fbb
remove accidental only
snowystinger Aug 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/@react-aria/overlays/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@react-aria/ssr": "^3.9.7",
"@react-aria/utils": "^3.27.0",
"@react-aria/visually-hidden": "^3.8.19",
"@react-stately/flags": "^3.0.5",
"@react-stately/overlays": "^3.6.13",
"@react-types/button": "^3.10.2",
"@react-types/overlays": "^3.8.12",
Expand Down
5 changes: 3 additions & 2 deletions packages/@react-aria/overlays/src/useOverlay.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
*/

import {DOMAttributes, RefObject} from '@react-types/shared';
import {getEventTarget} from '@react-aria/utils';
import {isElementInChildOfActiveScope} from '@react-aria/focus';
import {useEffect} from 'react';
import {useFocusWithin, useInteractOutside} from '@react-aria/interactions';
Expand Down Expand Up @@ -92,7 +93,7 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
};

let onInteractOutsideStart = (e: PointerEvent) => {
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(getEventTarget(e))) {
if (visibleOverlays[visibleOverlays.length - 1] === ref) {
e.stopPropagation();
e.preventDefault();
Expand All @@ -101,7 +102,7 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
};

let onInteractOutside = (e: PointerEvent) => {
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(getEventTarget(e))) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there are some 'relatedTarget' checks below, can we dive into a shadowDOM for those as well? i don't know if there is a composedPath for them

I could see this being an issue if getEventTarget is contained in e.relatedTarget or if the e.relatedTarget is a shadowroot and contains both targets that should be ignored as well as ones which shouldn't.
For example, if someone made a Toast Container inside a shadow dom, then clicking the toasts probably shouldn't count as outside but maybe clicking between individual toasts should for some reason.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that isChildOfActiveScope might be problematic as well if the activescope is within a shadowroot

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it weird that we call an external API with something that should be inside a shadowroot, it'd unintentionally leak shadow dom internals through our API

We don't do this in the pressEvents, though the use case is obviously a little different

if (visibleOverlays[visibleOverlays.length - 1] === ref) {
e.stopPropagation();
e.preventDefault();
Expand Down
146 changes: 123 additions & 23 deletions packages/@react-aria/overlays/test/useOverlay.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,30 @@
* governing permissions and limitations under the License.
*/

import {fireEvent, installMouseEvent, installPointerEvent, render} from '@react-spectrum/test-utils-internal';
import {
createShadowRoot,
fireEvent,
installMouseEvent,
installPointerEvent,
render
} from '@react-spectrum/test-utils-internal';
import {enableShadowDOM} from '@react-stately/flags';
import {mergeProps} from '@react-aria/utils';
import React, {useRef} from 'react';
import ReactDOM from 'react-dom';
import {useOverlay} from '../';

function Example(props) {
let ref = useRef();
let {overlayProps, underlayProps} = useOverlay(props, ref);
return (
<div {...mergeProps(underlayProps, props.underlayProps || {})}>
<div ref={ref} {...overlayProps} data-testid={props['data-testid'] || 'test'}>
<div
{...mergeProps(underlayProps, props.underlayProps || {})}
data-testid={'underlay'}>
<div
ref={ref}
{...overlayProps}
data-testid={props['data-testid'] || 'test'}>
{props.children}
</div>
</div>
Expand All @@ -29,19 +42,10 @@ function Example(props) {

describe('useOverlay', function () {
describe.each`
type | prepare | actions
${'Mouse Events'} | ${installMouseEvent} | ${[
(el) => fireEvent.mouseDown(el, {button: 0}),
(el) => fireEvent.mouseUp(el, {button: 0})
]}
${'Pointer Events'} | ${installPointerEvent}| ${[
(el) => fireEvent.pointerDown(el, {button: 0, pointerId: 1}),
(el) => fireEvent.pointerUp(el, {button: 0, pointerId: 1})
]}
${'Touch Events'} | ${() => {}} | ${[
(el) => fireEvent.touchStart(el, {changedTouches: [{identifier: 1}]}),
(el) => fireEvent.touchEnd(el, {changedTouches: [{identifier: 1}]})
]}
type | prepare | actions
${'Mouse Events'} | ${installMouseEvent} | ${[(el) => fireEvent.mouseDown(el, {button: 0}), (el) => fireEvent.mouseUp(el, {button: 0})]}
${'Pointer Events'} | ${installPointerEvent} | ${[(el) => fireEvent.pointerDown(el, {button: 0, pointerId: 1}), (el) => fireEvent.pointerUp(el, {button: 0, pointerId: 1})]}
${'Touch Events'} | ${() => {}} | ${[(el) => fireEvent.touchStart(el, {changedTouches: [{identifier: 1}]}), (el) => fireEvent.touchEnd(el, {changedTouches: [{identifier: 1}]})]}
`('$type', ({actions: [pressStart, pressEnd], prepare}) => {
prepare();

Expand All @@ -56,7 +60,7 @@ describe('useOverlay', function () {
expect(document.activeElement).toBe(input);
});

it('should hide the overlay when clicking outside if isDismissble is true', function () {
it('should hide the overlay when clicking outside if isDismissable is true', function () {
let onClose = jest.fn();
render(<Example isOpen onClose={onClose} isDismissable />);
pressStart(document.body);
Expand All @@ -66,15 +70,27 @@ describe('useOverlay', function () {

it('should hide the overlay when clicking outside if shouldCloseOnInteractOutside returns true', function () {
let onClose = jest.fn();
render(<Example isOpen onClose={onClose} isDismissable shouldCloseOnInteractOutside={target => target === document.body} />);
render(
<Example
isOpen
onClose={onClose}
isDismissable
shouldCloseOnInteractOutside={(target) => target === document.body} />
);
pressStart(document.body);
pressEnd(document.body);
expect(onClose).toHaveBeenCalledTimes(1);
});

it('should not hide the overlay when clicking outside if shouldCloseOnInteractOutside returns false', function () {
let onClose = jest.fn();
render(<Example isOpen onClose={onClose} isDismissable shouldCloseOnInteractOutside={target => target !== document.body} />);
render(
<Example
isOpen
onClose={onClose}
isDismissable
shouldCloseOnInteractOutside={(target) => target !== document.body} />
);
pressStart(document.body);
pressEnd(document.body);
expect(onClose).toHaveBeenCalledTimes(0);
Expand All @@ -92,7 +108,9 @@ describe('useOverlay', function () {
let onCloseFirst = jest.fn();
let onCloseSecond = jest.fn();
render(<Example isOpen onClose={onCloseFirst} isDismissable />);
let second = render(<Example isOpen onClose={onCloseSecond} isDismissable />);
let second = render(
<Example isOpen onClose={onCloseSecond} isDismissable />
);

pressStart(document.body);
pressEnd(document.body);
Expand All @@ -117,7 +135,9 @@ describe('useOverlay', function () {

it('should still hide the overlay when pressing the escape key if isDismissable is false', function () {
let onClose = jest.fn();
let res = render(<Example isOpen onClose={onClose} isDismissable={false} />);
let res = render(
<Example isOpen onClose={onClose} isDismissable={false} />
);
let el = res.getByTestId('test');
fireEvent.keyDown(el, {key: 'Escape'});
expect(onClose).toHaveBeenCalledTimes(1);
Expand All @@ -127,10 +147,90 @@ describe('useOverlay', function () {
installPointerEvent();
it('should prevent default on pointer down on the underlay', function () {
let underlayRef = React.createRef();
render(<Example isOpen isDismissable underlayProps={{ref: underlayRef}} />);
let isPrevented = fireEvent.pointerDown(underlayRef.current, {button: 0, pointerId: 1});
render(
<Example isOpen isDismissable underlayProps={{ref: underlayRef}} />
);
let isPrevented = fireEvent.pointerDown(underlayRef.current, {
button: 0,
pointerId: 1
});
fireEvent.pointerUp(document.body);
expect(isPrevented).toBeFalsy(); // meaning the event had preventDefault called
});
});
});

describe('useOverlay with shadow dom', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think these tests are going to be enough, usually overlays portal out to be a direct child of the body element, which would actually take them out of a shadowroot potentially

This can also be changed with UNSTABLE_PortalProvider

We'll need tests using the RAC Popover at a minimum

beforeAll(() => {
enableShadowDOM();
});

describe.each`
type | prepare | actions
${'Mouse Events'} | ${installMouseEvent} | ${[(el) => fireEvent.mouseDown(el, {button: 0}), (el) => fireEvent.mouseUp(el, {button: 0})]}
${'Pointer Events'} | ${installPointerEvent} | ${[(el) => fireEvent.pointerDown(el, {button: 0, pointerId: 1}), (el) => fireEvent.pointerUp(el, {button: 0, pointerId: 1})]}
${'Touch Events'} | ${() => {}} | ${[(el) => fireEvent.touchStart(el, {changedTouches: [{identifier: 1}]}), (el) => fireEvent.touchEnd(el, {changedTouches: [{identifier: 1}]})]}
`('$type', ({actions: [pressStart, pressEnd], prepare}) => {
prepare();

it('should not close the overlay when clicking outside if shouldCloseOnInteractOutside returns true', function () {
const {shadowRoot, shadowHost} = createShadowRoot();

let onClose = jest.fn();
let underlay;

const WrapperComponent = () =>
ReactDOM.createPortal(
<Example
isOpen
onClose={onClose}
isDismissable
shouldCloseOnInteractOutside={(target) => {
return target === underlay;
}} />,
shadowRoot
);

const {unmount} = render(<WrapperComponent />);

underlay = shadowRoot.querySelector("[data-testid='underlay']");

pressStart(underlay);
pressEnd(underlay);
expect(onClose).toHaveBeenCalled();

// Cleanup
unmount();
document.body.removeChild(shadowHost);
});

it('should not close the overlay when clicking outside if shouldCloseOnInteractOutside returns false', function () {
const {shadowRoot, shadowHost} = createShadowRoot();

let onClose = jest.fn();
let underlay;

const WrapperComponent = () =>
ReactDOM.createPortal(
<Example
isOpen
onClose={onClose}
isDismissable
shouldCloseOnInteractOutside={(target) => target !== underlay} />,
shadowRoot
);

const {unmount} = render(<WrapperComponent />);

underlay = shadowRoot.querySelector("[data-testid='underlay']");

pressStart(underlay);
pressEnd(underlay);
expect(onClose).not.toHaveBeenCalled();

// Cleanup
unmount();
document.body.removeChild(shadowHost);
});
});
});
1 change: 1 addition & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6407,6 +6407,7 @@ __metadata:
"@react-aria/ssr": "npm:^3.9.7"
"@react-aria/utils": "npm:^3.27.0"
"@react-aria/visually-hidden": "npm:^3.8.19"
"@react-stately/flags": "npm:^3.0.5"
"@react-stately/overlays": "npm:^3.6.13"
"@react-types/button": "npm:^3.10.2"
"@react-types/overlays": "npm:^3.8.12"
Expand Down