Calendar keyboard navigation + altering defaults

[timarney]

We have some cards open where we want to alter Calendar focus based on where the users has navigated to.

For example if the user is on the last day of the month can we set the focused item to be the next month button?

Is this possible?

Looking into what's available as far as altering key press events.

DayPicker offers a onDayKeyDown prop but it doesn't look like it's going to handle what we need.

<DayPicker
  onDayKeyDown={(day, modifiers, e) => {
       console.log(day)
       return false
   }}
....

1. The code that handles Day keyboard events can be found here:

https://github.com/gpbl/react-day-picker/blob/1a75b449779b1723ec400556bf3cf4affade9861/src/DayPicker.js#L404

Given a "Right" key press

case RIGHT:
        Helpers.cancelEvent(e);
        this.focusNextDay(e.target);
        break;

The code is calling focusNextDay first

After that

It's calling the callback if it's set.

if (this.props.onDayKeyDown) {
      this.props.onDayKeyDown(day, modifiers, e);
    }

We end up receiving the "original day" prior to the focusNextDay event.

Also there's a call to "cancelEvent"

Helpers.cancelEvent(e);

Which stops event propagation https://github.com/gpbl/react-day-picker/blob/1a75b449779b1723ec400556bf3cf4affade9861/src/Helpers.js#L5

Quick research outcome Based on the current DayPicker repo code doesn't look like we have the opportunity to alter the default handlers.

cc: @pcraig3

[timarney]

Cards have been tagged as blocked.

[pcraig3]

Yeah, looks like we're blocked on this without very specific access to some of the react-day-picker events.