Month jumping on date selection

[teksebarna]

Subject of the issue

I'm using DateRangePicker in a Next.js project.
There are two months next to each other, let's say January and February. When I select the start date from the second month (February), then it jumps to the left, replacing the first month (January). And on the right, a new month jumps in (March).

[BUG] Bug Reproduce Steps

1. Go to this demo page.
2. Select the start date from the second month
3. Second month jumps to the left
   You can observe this issue in this video.

[BUG] Expected behavior

Same behavior as on your demo page or in this video.
When selecting the start date from the second month: both months stay in place.

Environment

Package Version: 1.1.3
React version: ^16.13.1
Next version: 10.0.6
Node version: 10.23.0
Browser: Chrome 88.0.4324.104

Here are all dependencies from package.json:
"dependencies": {
"date-fns": "2.16.1",
"next": "latest",
"react": "^16.13.1",
"react-date-range": "1.1.3",
"react-dom": "^16.13.1"
},

Any help will be kindly appreciated.
Thank you!

[jjolmo]

+1!
Totally needed this feature! Can't find a way to keep it where it is. Having a prop to set the active month would be better
Can't find even a silly workaroud to solve it

[Skorpioh]

+1 here as well; very much looking forward to having this unwanted feature/bug fixed

[fmarcoccia]

+1! this behavior is very annoying

[aaron5670]

+1! Need this feature too... :(

[aaron5670]

A better solution is maybe a small animation.
Like the example bellow. 👀

[teksebarna]

One thing I don't understand: how come it's working perfectly on their demo page: https://hypeserver.github.io/react-date-range/#!/DateRangePicker/1 ?

[isaac1104]

Any updates on this issue?

[subwai]

I managed to track down the issue to #399
In my opinion the logic in calcFocusDate is flawed from the start. It always assumes you want to focus to the startDate & it can't tell the difference between a click in the calendar vs an external selection like clicking a defined range.

I started writing a PR that implements the use of focusedRange[1] to at least prioritize endDate over startDate which will work well enough for my own issue (I built my own DateRangePicker with 2 calendar components, 1 for selecting start date & 1 for end date that operates independently but shares the range).

However, I don't believe that is enough to solve the entire issue as I think the differenceInCalendarMonths solution that currently exists doesn't really work at all.

differenceInCalendarMonths(start, end) > months

The difference in months will always be a negative value since start is always < end. The statement will therefor never be true & the currentFocusedDate will therefor never be used.
The logic that existed prior to that PR was better & even worked for my own scenario, but won't work when you want to "reset" the calendar view.

An ultimate solution would be to expose a focusedDate prop rather than trying to solve all scenarios perfectly internally. Or maybe you could argue that it should be possible to "reset" by using a new key prop on the Calendar elements for those scenarios.
Thoughts?

Fyi @teksebarna, the reason it works on the demo page is because it's using a version before that PR.

[kamyar]

@subwai thank you for the great investigation and yes, the demo was outdated and we recently automated its deployment.
focusedDate prop sounds good to me, additionally animations would also be great.
If you can lend a hand we would appreciate it, otherwise we can finalize a decision and I will try to take a look. :)

[kamyar]

It seems there is already a PR that might address it, please let us know what your thoughts are regarding that: #428
Duplicate of #427

[owenbirdsall]

Does anyone have a temporary workaround for this, or is it best to just use an older version for now?

[LucyMac]

I'm also having this issue, I need the month layout to stay consistent regardless of calendar date selection.
@kamyar #428 looks good as far as I can tell - merging this would be amaaaazing 😃

[kamyar]

Hey @LucyMac we already added this option, can you take a look at retainEndDateOnFirstSelection prop in version 1.3.0?

Would appreciate if you confirm if it works so I can close this issue

nvm, wrong feature I will take another look into the PR for fixing it 👍