clickUnselectsDay not working with classNames

[samwhale]

Similar to #689, clickUnselectsDay will not work when using classNames. modifiers.selected won't catch if the .selected class when it has been hashed by classNames.

codesandbox: https://codesandbox.io/s/jnkz4k2rmw. Click on a day, then click on the same day.

Expected Behavior

When clicking the selected day It should unselect and clear the input.

Actual Behavior

The selected day and input remain unchanged

Line in question:

react-day-picker/src/DayPickerInput.js

Line 480 in 1a75b44

if (modifiers.selected && clickUnselectsDay) {

Should be a very similar fix as #741

[jack1012t]

I am looking to contribute here, especially since I've used the repo and decided I would start with a bug marked as easy. @samwhale what is the use case for unselecting the date if you are clicking the selected date? - I think this is odd behavior, curious as to why this would be desired ...

[samwhale]

Hi @jack1012t, good question. Although it may not be a feature that is used often, some people may click days to unselect them rather than clearing the input by key input, clearing the input using a button, or resetting the application. This could be the only way to clear the input if the input itself is disabled and the user must only change the day with the day picker overlay.

clickUnselectsDay is an implemented feature of the library that isn't working with css modules. This would be an awesome easy fix if you're looking to start contributing to open source.

[jack1012t]

Thanks @samwhale I can see that use case, if the input is disabled (sometimes easier to validate the date if you don't let the user provide the data directly), then yes, there's no way to set the date back to blank. I'll see what I can add here for a fix.

[jack1012t]

Ok @samwhale , a bit of an update. Running this locally, I get an error if I use the classNames from your codepen:
classNames: { disabled: "Any class", selected: "Any class" }

I got yelled at in the console until I got the classNames to this point:
dayPickerProps: {classNames: { disabled: "Any class", selected: "Any class", today: "redred", day: "redred", outside: "redred", navBar: '', body: '', caption: '', weekday: '', weekdays: '', weekdaysRow: '', week: '', month: '', navButtonPrev: '', navButtonNext: '' }}

There are two things I notice around the line you mentioned:
if (modifiers.selected && clickUnselectsDay) {

• modifiers.selected is undefined and when classNames are used, we're not even making it to this line anyway (still probably a bug I will try to fix - at least get the modifiers.selected passed properly).

• if you have class names and you've included "disabled" as one of the classes, then you end up satisfying this if:
  // Do nothing if the day is disabled if ( modifiers.disabled || (dayPickerProps && dayPickerProps.classNames && modifiers[dayPickerProps.classNames.disabled]) ) { return; }
  and you return just before the check on line 480. I'm not sure why 'disabled' is a required className, but because you're including that, you see the behavior you're seeing. I'm not quite certain how to approach this, because even if modifiers.selected is set properly, we'll never reach that condition the way the app is coded. As you can see, removing the requirement for 'disabled' does not solve the issue since once you set dayPickerProps and a className, you're satisfying this statement: dayPickerProps && dayPickerProps.classNames

@gpbl it looks like these are the required classNames: http://react-day-picker.js.org/api/DayPicker/#classNames - which ones are required?

[StuckInSprings]

I'm having this same issue. Using CSS modules the .selected class never gets applied and the logic is unable to remove the date using the public method.