DatePickerE: Tabbing away from day in calendar should clear range highlight

[jpveooys]

When the date picker is in range mode and a second date is being selected (focused) using the keyboard arrow keys, the days between the first and focused date are shaded.

However, the shading isn't cleared when tabbing to a different element. This is due to react-day-picker v7 not exposing a onDayBlur prop (which would allow us to clear the highlight).

However, the prop has been added for react-day-picker v8 which is currently in beta, so this should be fixable once a stable version of it is released.

[jpveooys]

Note: v8 is due for release before the end of the year: https://github.com/gpbl/react-day-picker/discussions/1316

We could start using it for DatePickerE only using an alias.

[gpbl]

👋 hey thanks for looking at react-day-picker!

Please remember v8 is a major update mainly incompatible with the previous version. If you are evaluating the beta or considering to upgrade, consider to contact the mantainers at the DayPicker Slack. We can help for real use-cases for DayPicker and see how it is implemented around.

[jpveooys]

Hi @gpbl :wave:

Thanks for visiting! :smile:

Our date picker component (DatePicker) is built on react-day-picker and we're currently working on a new version of it (DatePickerE) as you've probably gathered :slightly_smiling_face:

We're planning on having a look at migrating DatePickerE to the react-day-picker v8 beta as there's lots of good stuff in there we've been looking for :smile: But realistically, I think this will be in January now (with Christmas time off etc.)

Thanks again!

[jpveooys]

Working branch: https://github.com/defencedigital/mod-uk-design-system/tree/feature/date-picker-e-v8

[github-actions[bot]]

This issue has been marked as stale because it has been open for 60 days with no activity