fix: Ignore presses retargeted to the document element in dismissable modals - #10511
Open
FrancoKaddour wants to merge 1 commit into
Open
fix: Ignore presses retargeted to the document element in dismissable modals#10511FrancoKaddour wants to merge 1 commit into
FrancoKaddour wants to merge 1 commit into
Conversation
snowystinger
left a comment
snowystinger
left a comment
Member
There was a problem hiding this comment.
Thanks for the PR
Looks like lint is failing
| expect(onOpenChange).not.toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('should not hide the overlay when a press is retargeted to the document element', function () { |
Member
There was a problem hiding this comment.
Can we move these tests up to the RAC level and demonstrate the use case you brought up?
Comment on lines
+77
to
+79
| pressStart(document.documentElement); | ||
| pressEnd(document.documentElement); | ||
| fireEvent.click(document.documentElement); |
Member
There was a problem hiding this comment.
how is this pressing an element that is swapped mid press? it's clicking the documentElement in every event
| // would close the modal under the user's pointer. Non-modal overlays must keep | ||
| // treating it as valid: on pages with a short body, presses below the body | ||
| // target the document element and should still dismiss (see #1367). | ||
| if (element === element.ownerDocument.documentElement) { |
Member
There was a problem hiding this comment.
what happened to the isConnected check you proposed?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #10510
🧢 Your Project
N/A — fixing a bug reported by a user of
react-aria-components.📝 Description
When the element being pressed inside a dismissable
ModalOverlayis removed from the DOM mid-press (e.g. a row button swapped out when an async mutation resolves), the browser retargets the press events: bothpointerdownandclickarrive with the document element as their target.isValidEventinuseInteractOutsidethen treats the press as a genuine outside interaction:documentElement.contains(documentElement)istrue, andevent.composedPath()for a root-targeted event never includes the overlay ref.Both events "look outside", so the modal dismisses under the user's pointer.
This PR scopes the fix to
useModalOverlay: a modal's underlay covers the viewport, so the document element is never a legitimate outside-press target for a modal — it only shows up as one via mid-press retargeting. The hook now composesshouldCloseOnInteractOutsideto reject the document element before delegating to a user-provided predicate (so the existing escape hatch keeps working).The check deliberately does not live in
useInteractOutside/isValidEvent: non-modal overlays must keep treating the document element as a valid outside target, because on pages with a short<body>, presses below the body target the document element and should still dismiss a popover — that's the reason the guard was widened frombodytodocumentElementin #1369 (fixing #1367). This change leaves popovers untouched.🧪 Test plan
Two new tests in
useModalOverlay.test.js, parameterized over the existing Mouse/Pointer/Touch event matrix (6 cases):shouldCloseOnInteractOutsidereturnstrue.Both fail on
main(the modal closes) and pass with this change. No regressions:packages/react-aria/test/overlays/(197 tests) andreact-aria-componentsDialog/Popoversuites (27 tests) pass.🚀 How to test locally
✅ PR Checklist