Skip to content

DateRangeCalendar: expose resetOnSelect so range consumers can restart a range on click #112264

Description

@retrofox

Problem

In DateRangeCalendar, clicking a day while a complete range is selected never restarts the range: react-day-picker's default addToRange moves the endpoint nearest to the clicked day instead. A user's natural "click start, click end" gesture can even cancel out exactly and leave the original range untouched. react-day-picker supports resetOnSelect for exactly this, and it already reaches DayPicker through the ...props spread, but it isn't part of DateRangeCalendarProps, so typed consumers can't opt in without a cast against an undocumented pass-through.

Proposed Solution

Expose resetOnSelect as a first-class prop on the range calendar, and document that in controlled mode the first click emits a half-open range ({ from, to: undefined }) the consumer must render back for the two-click flow to work.

Tasks

  • Add resetOnSelect to the range props in packages/ui/src/calendar/types.ts and forward it explicitly
  • Document the controlled half-open emission in the README
  • Add a story covering restart-on-click selection
  • Consider mirroring the prop in core's copy (@wordpress/components private DateRangeCalendar)

Location

  • packages/ui/src/calendar/date-range-calendar/index.tsx
  • packages/ui/src/calendar/types.ts

Context: found while fixing the date range picker in Automattic/jetpack#50179, which currently implements the restart-on-click behavior consumer-side.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions