Strange UI for DateRange when scrolling months

[isabellachen]

The behaviour of the dateRange picker when used with the months scroller is a bit unintuitive.

Steps to reproduce

1. Select start date (eg. 28 Feb 2024)
2. Scroll to subsequent month (eg. March)
3. The hove-range highlight is applied by default for all the days in March from day 1 to day 28

Is there a way to only trigger the hover range highlight (ie the class react-datepicker__day--in-selecting-range) only when the user move the cursor over the days on the calendar and not when the user scrolls the month?

Screen.Recording.2025-01-27.at.2.11.28.PM.mov

[SaiBalaji202]

Hi,

This is happening because by default, react-datepicker will pre-select a day for the keyboard navigation, it'll be the same date as you select for the start date (when the end date is not yet selected), that's why the range selector style is getting applied till the keyboard selected date. You can test this by using arrow keys and notice the highlighted dates modification.