Skip to content

fix: RangeCalendar range selection in shadow DOM#10347

Draft
AKnassa wants to merge 1 commit into
adobe:mainfrom
AKnassa:rocky/issue-10330-shadow-range-calendar
Draft

fix: RangeCalendar range selection in shadow DOM#10347
AKnassa wants to merge 1 commit into
adobe:mainfrom
AKnassa:rocky/issue-10330-shadow-range-calendar

Conversation

@AKnassa

@AKnassa AKnassa commented Jul 21, 2026

Copy link
Copy Markdown

Closes #10330

When a RangeCalendar (including the calendar inside DateRangePicker) is rendered inside a shadow root with enableShadowDOM(), clicking a single date immediately committed a range where start === end, so a multi-day range could never be selected by clicking.

The window-level pointerup listener in useRangeCalendar read the raw e.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-safe getEventTarget() helper, as suggested by @snowystinger in the issue.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

  1. yarn jest packages/react-aria-components/test/RangeCalendar.test.tsx — the new shadow DOM describe contains a click-selection test that fails without the fix (onChange fires with start === end on the first click) and passes with it, plus a test guarding that releasing a drag outside the calendar still commits the selection.
  2. Manual: call enableShadowDOM() from @react-stately/flags, render a RangeCalendar inside an open shadow root, and click two dates — the range commits only on the second click, matching light DOM behavior.

🧢 Your Project:

No response

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RangeCalendar inside shadow DOM commits range on first click (endDragging uses retargeted e.target)

1 participant