With 2 months shown and inline calendar, the months shift when range selected spans the 2 months

[sshilal1]

I have an inline calendar with 2 months shown. Whenever a user selects a date range that spans the 2 months, if the range is not in the same month, the left month slides out of view. As seen in the gif below, In order to view the full range, a user must select the back arrow to see the range again.

Here is my code

<DatePicker
  inline
  selected={this.state.startDate}
  startDate={this.state.startDate}
  endDate={this.state.endDate}
  onChange={this.handleDateSelect}
  monthsShown={2}
  shouldCloseOnSelect={false}
/>

I feel as if there should be a prop to enable / disable this.

[aij]

I don't think the months were intended to shift when selecting a day. It seems like a buggy interaction between monthsShown and inline. (Normally, the date picker would close after selecting a date, so re-opening to the last selected date is fine/expected, but staying open and shifting is weird.)

[omasback]

After testing out different versions, I believe this regression was introduced in 1.1.0. Also for me, I dont even need to click a day to trigger this behavior. Even clicking outside shifts the months, with no days selected.

[fooberichu150]

We're running into this issue as well. I don't mind so much that it shifts the calendar as that when you're on a mobile device (I think it may just be iOS) the previous date placeholder on the 2nd month still shows highlighted until you "touch" somewhere else on your screen. Getting this bug fixed would at least also prevent that associated display issue from showing up.

Before:

After (December 13th being my selection):

[martijnrusschen]

Should be fixed now

[smithaitufe]

Please I need to know how this was eventually resolved.

How do you know if it is the startDate that was selected or if the endDate that was selected?