fix: RangeCalendar range selection in shadow DOM#10347
Draft
AKnassa wants to merge 1 commit into
Draft
Conversation
The window-level pointerup listener in useRangeCalendar read the raw
e.target, which is retargeted to the shadow host for events originating
inside a shadow root. nodeContains() then always reported the release
as outside the calendar, committing {start === end} on the first click.
Resolve the real target with the shadow-safe getEventTarget() helper.
Fixes adobe#10330
5 tasks
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
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 #10330
When a
RangeCalendar(including the calendar insideDateRangePicker) is rendered inside a shadow root withenableShadowDOM(), clicking a single date immediately committed a range wherestart === end, so a multi-day range could never be selected by clicking.The window-level
pointeruplistener inuseRangeCalendarread the rawe.target. For events coming from inside a shadow root the browser retargets that to the shadow host, so the calendar always believed the pointer was released outside of it and committed the in-progress selection on every click. The listener now resolves the real target with the existing shadow-safegetEventTarget()helper, as suggested by @snowystinger in the issue.✅ Pull Request Checklist:
📝 Test Instructions:
yarn jest packages/react-aria-components/test/RangeCalendar.test.tsx— the newshadow DOMdescribe contains a click-selection test that fails without the fix (onChangefires withstart === endon the first click) and passes with it, plus a test guarding that releasing a drag outside the calendar still commits the selection.enableShadowDOM()from@react-stately/flags, render aRangeCalendarinside an open shadow root, and click two dates — the range commits only on the second click, matching light DOM behavior.🧢 Your Project:
No response