Months are shown using a different layout after clearing dates in multi-month range selection

[thepuzzlemaster]

Describe the bug I've noticed a strange behavior, which feels like a bug, but i may just be missing something. After clearing out a selected date range on the date-picker, the dates shown when opening the date-picker are different than the first time the date-picker was opened.

To Reproduce Steps to reproduce the behavior:

1. Go to 'docs page'
2. Replace any of the examples with the sample code below
3. Open the date-picker and choose any date range on the right-side calendar
4. Clear the date range using the "X" button

5. Open the date-picker again

   () => {
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
   
   const onChange = React.useCallback((dates) => {
   setStartDate(dates[0]);
   setEndDate(dates[1]);
   }, [])
   return (
   <DatePicker
     endDate={endDate}
     isClearable
     minDate={new Date()}
     monthsShown={2}
     onChange={onChange}
     selected={startDate}
     selectsRange
     startDate={startDate}
   />
   );
   };

   Expected behavior I don't expect the previous month to show up on the left side, since the entire month is disabled. I would expect that the first month to show up on the left, should be the current month. This is how the date-picker behaves on the first-render before clearing the dates

Actual behavior The previous month shows up on the left side, even though all dates in that month are disabled. And additionally, this behavior is different from the first time the date-picker is opened, where the left-side month is the current month.

Screenshots Initial render

After clearing the dates

Desktop (please complete the following information):

• OS: osx
• Browser: chrome
• Version: whichever version is running on the docs page - I presume the latest. I am also seeing this in V4.8.0 locally

Additional context I have tried adding showPreviousMonths={false} but it makes no difference.

[TimofeiKurohtin]

Same here. Have you found the solution? It seems to me that if you choose chosen date range in the left part of the calendar than after clearing positioning is ok, but if you choose dates on the right part - positioning is broken. Also I has openToDate prop equal to minDate - but this does not help

[thepuzzlemaster]

I have admittedly not spent too much time trying to fix this one, so I have not yet found a way to prevent it from happening.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[thepuzzlemaster]

I just checked and this bug is still active on the docs page. @TimofeiKurohtin's observation is accurate, that the range must be selected on the right calendar to repro. I updated the repro steps to reflect this.