rdp-selected not added on disabled from day when using onDayClick

[staaky]

Code

When using onDayClick for custom selection behavior, disabling the from day after clicking it won't give it the rdp-selected class. This used to work in v8, there it got both rdp-disabled and rdp-selected.

See this codesandbox

Also note the empty function in onSelect, it's needed for onDayClick to work since that makes the component controlled in v9.

Expected Behavior

A disabled selected from day should have both rdp-disabled and rdp-selected. So you can see the start of the selection even with the day being disabled.

Actual Behavior

In v9, rdp-selected isn't added, so you don't see the start of the selection.

Screenshots

Current	Expected

[gpbl]

When using onDayClick for custom selection behavior, disabling the from day after clicking it won't give it the rdp-selected class. This used to work in v8, there it got both rdp-disabled and rdp-selected.

Yeah, I see what you mean - thanks for the detailed report.

As a workaround, you could add a custom disabled modifier and a related CSS class.

The following should work:

<DayPicker
-   disabled={disabledDays}
+   modifiers={{ disabled: disabledDays }
+   modifiersClassNames={{
+      disabled: 'rdp-disabled',
+   }}
/>

Not sure about the fix to the DayPicker source code. Ideally, if you want a custom selection, you should not use selected, disabled, and hidden, which have special meanings in the library. Instead, you should use custom modifiers.

I'll check out your sandbox and see if I can come up with a better solution!

[staaky]

Thanks, a custom modifier like this worked as well:

<DayPicker
    disabled={disabledDays}
    {...(selectedRange?.from &&
        !selectedRange?.to && {
            modifiers: {
                selectedFrom: [selectedRange.from],
            },
            modifiersClassNames: {
                selectedFrom: 'rdp-selected !opacity-100',
            },
        })}
/>