React-dates: Selected Dates (css-styles) not being cleared

[acr13]

GIF:

Not sure if this is the desired behaviour, but the <td> cells aren't having their css classes cleared when a new selection is made. If I understand the code (and bug) correctly, this only happens to dates that are selected in the <div class="CalendarMonth .. " data-visibile="false"> ... </div> wrapper.

It's almost like any cell in that data-visible="false" wrapper doesn't get any CSS classes removed when a new selection is made.

Let me know if I can help in any way 👍
Thanks for all your hard work, this lib is awesome 😄

[majapw]

Hmmmm, that's a pretty serious bug. I thought that I had adjusted it so that the invisible months were included in the recalculation but maybe not.

https://github.com/airbnb/react-dates/blob/master/src/components/DayPickerRangeController.jsx#L235-L243 is the code I would expect to clear that range. Obviously it's not quite doing the right thing. I can look into this EOD.

[acr13]

@majapw Appreciate the fast response! I'll also take a look at this and if I get lucky and solve the bug I'll make a PR.

👍

[acr13]

got it working @majapw - I don't have permissions to push my branch, but here's the rundown if you're interested:

The code you linked was working properly, but its this clause in the deleteModifier() function that was being evaluated to true:
https://github.com/airbnb/react-dates/blob/master/src/components/DayPickerRangeController.jsx#L648-L650

so, it was just returning updatedDays without actually clearing any styles on the invisible months. (Note - I'm calling the 'invisible months' the ones before and after the actual visual set, since this bug only affects those).

So all I did was change the util function isDayVisible to account for those months, and its working nicely. I changed the variables fistDatOfFirstMonth and lastDayOfLastMonth to these:

let firstDayOfFirstMonth = month.clone().subtract(1, 'month').startOf('month');
...
let lastDayOfLastMonth = month.clone().add(numberOfMonths, 'months').endOf('month');

and of course had to fix some tests:

Hope this helps 👍

[majapw]

Awesome! Thank you! I will create a branch and push that up (and probs tag you @acr13).

[majapw]

Closing in favor of #575 which I just merged and am releasing in v12.2.0