react-datepicker icon indicating copy to clipboard operation
react-datepicker copied to clipboard

`selectsMultiple` and `selectsRange` - default dates or manual typing in dates does not navigate to those months

Open michaelsawyers opened this issue 8 months ago • 0 comments

Describe the bug When I use selectsMultiple or selectsRange with a default selectedDates for selectsMultiple or manually typing in dates with selectsRange, the popover does not navigate to the months of the selected dates.

Note: this seems to just be a navigation issue, if I use nav arrows to the months of my selected months I do see the dates are properly selected.

To Reproduce Steps to reproduce the behavior:

  1. Go to Date range for one datepicker example on demo site, and type in a date range for a different month than you see in the popover
  2. Notice the popover is not navigated to the month of the selected dates

AND

  1. Go to Select multiple dates example on demo site, and switch the useState default date to a different date that is outside the current month shown in the popover
  2. Notice the popover is not navigated to the month of the default date (also testing in local code with initial render also not showing the popover as the default date's month)

Expected behavior When I set default dates in selectsMultiple, or type in a date range manually in input for selectsRange, I expect to see the popover be navigated to the month of dates selected.

Screenshots Image

https://github.com/user-attachments/assets/1a1bad5a-0b5f-4d2c-97ef-20734b51579e

Desktop (please complete the following information):

  • OS: Mac
  • Browser: Chrome
  • Version: modern versions

My workaround is to deal with this in custom onChange, if selectsMultiple or selectsRange, use datepicker ref to set preSelection via setPreSelection to the first/start date once its passing as isValid. Would love to know if there are consequences to this, or if there is a better route. I preferred not setting ref.current.setSelected as I think this is more drastic than just setting the preSelected which just navigates.

ie. For date range case:

if (isValid(startDate)) {
   datePickerRef?.current?.setPreSelection(startDate);
}

michaelsawyers avatar Apr 22 '25 21:04 michaelsawyers