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]

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.

[fundangoo]

This also has a serious impact on control over openToDate.

Initial selection
Note that the entire month July is inactive, therefore the pagination towards too.

Reopen
Even though we try to make it keep the startDate of the selection range on the left, it shifts one right, bringing in July for no reason.

Dynamic
As I mentioned above, the issue is indeterministic, it's also impossible to introduce a reliable workaround, e.g. adding one month to the openToDate, as it may end up in something like below.

Or even worse, when the selection is within one month (December).

The issue has been stale for quite a while, so I think it deserves paying some attention, and fix it finally.

[github-actions]

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.

[martijnrusschen]

This issue should be fixed in v8.10.0 by the change that resets monthSelectedIn to 0 whenever selectsRange is true. The fix was originally for issue #5939 but should also address #3960.