React-dates: DayPickerSingleDateController does weird things when date is not in the current month

[lukemcgregor]

If I set an initial date more than 2 months ago (with DayPickerSingleDateController) a number of strange things happen.

• the outside of range stops rendering (but it still prevents clicks)
• browsing to the selected day flashes the date selection and then shows it unselected

<DayPickerSingleDateController
    date={moment().add(-2, 'months')}
    onDateChange={date => { }}
    isOutsideRange={(day) => {
        return !day.isSameOrBefore(moment());
    }}/>

If I log out the values isOutsideRange is called with it runs on all the dates in the month from date +- 1 month. I think this behaviour would be correct if it also opened on the month for date.

if I try and use initialVisibleMonth={()=>moment().add(-2, 'months')} it doesn't seem to affect the default month. In addition setting this 2 months back without setting date reproduces the same issue.

Im using the latest NPM package (12.6.0).

[majapw]

hmmm, something weird is going on with the initial month setting. I will investigate this more.

[tylerjbainbridge]

I'm also having this problem.

Using the example code initialVisibleMonth={() => moment().add(10, 'months')} does not yield the expected result :(, it just stays on the current month.

[majapw]

@tylerjbainbridge do you have a selected date set?

In general, the selected date always wins over initialVisibleMonth

https://github.com/airbnb/react-dates/blob/master/src/components/DayPickerSingleDateController.jsx#L425

Because we kind of assume that that's where the user last made a change and that's what would make sense to show.

I think the details described by @lukemcgregor initially are a bit more troubling. Are you also experiencing the outsiderange/flashing styles @tylerjbainbridge?

[lukemcgregor]

I only had the range/flashing selected style issues when the selected/initial date was more two back on the months display (ie not in the current month or the prev month). It all applied correctly when in the current or bordering months, however if in the previous month it didnt select that month in the picker.

[SimeonC]

I have it occurring on 2+ forward months as well.

[ericsaboia]

@tylerjbainbridge I think your issue is similar to https://github.com/airbnb/react-dates/issues/824. Adding focused={true} solves it

[marcellarius]

Adding focused={true} seems to fix the other weird behaviours that @lukemcgregor mentioned too.

[majapw]

Hmm, I think probably we should set the default value of focused to true on both DayPickerControllers