React-dates: Selected dates not painted when load more months

[cagiraudo]

Hi, i couldn't find the issue so i don't know if it's a known issue.

When you open the datepicker in mobile vertically and you load more months it doesn't paint when you select the date.

The same error is present in airbnb.com when you visit with mobile:

In this image you can see how it paint when i select the first date in the months loaded at begining:

And here you can see how it doesn't paint when i select a date in a month that was loaded after

[majapw]

Yup! Need to fix the vertical scrollable datepicker. X_x

[crash7]

Hi @majapw,
I did some digging here, and found that the problem is related to this condition:

addModifier(updatedDays, day, modifier) {
    ....
    if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
      return updatedDays;
    }

isDayVisible is not considering the number of visible months in the calculation to validate the date.

Adding something like numberOfMonths = Object.keys(visibleDays).length; a couple of lines above fixes this particular problem but problably there is a better aproach to avoiding overriding a prop (seems hacky to me).
Example:

    if (orientation !== VERTICAL_SCROLLABLE) {
      currentMonth = currentMonth.clone().subtract(1, 'month');
      numberOfMonths += 2;
    } else {
      numberOfMonths = Object.keys(visibleDays).length;
    }
    if (!day || !isDayVisible(day, currentMonth, numberOfMonths, enableOutsideDays)) {
      return updatedDays;
    }

I checked the tests and adding this doesn't break anything but didn't submit a PR yet.

[dankremniov]

Hi @majapw,

Any updates on this one?

[The-Code-Monkey]

@majapw has this been fixed yet?

[dankremniov]

Is it fixed for DayPickerSingleDateController as well? I am still getting the same issue on [email protected].