gpbl / react-day-picker

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.
https://daypicker.dev
MIT License
5.86k stars 701 forks source link

Improve focus capabilities #2173

Open gpbl opened 1 month ago

gpbl commented 1 month ago

Discussed in https://github.com/gpbl/react-day-picker/discussions/1735

Originally posted by **GeorgeTaveras1231** March 20, 2023 As it stands, the DayPicker component supports an `initialFocus: boolean` prop. The way this works is it focuses on the selected or current date on mount. This prop is very limited to cases where the component is mounted and unmounted. This means that if the component stays mounted, and a consumer wants to switch focus to the day, he cannot do so. This is an issue when the DayPicker has to stay mounted for UX reasons, such as when implementing animation. I personally encountered this issue because in my case, the DatePicker is a dropdown for a combobox, and unmounting the component makes it lose its navigation state. (For example, I open the dropdown, navigate a month forward, close the dropdown, and re-open it -- I expect the month to be where I left off. Expectedly, this state is lost on unmount). I propose that an imperative API to manage focus is exposed. The argument is that as I consumer, I should be able to control when the focus is triggered, additionally, react can't and doesn't manage focus via props, since this is an internal browser state, so this should not be handled via a prop because the focus prop will inevitably be out of sync with the browser. Example of proposed API ```js const dayPickerRef = React.useRef(); ``` Then anywhere in the code, when you want to switch focus to the day, execute: ```js dayPickerRef.current.focus(); ``` This will unlock opportunities to improve accessibility in more cases that are supported today -- as I stated, cases where the datepicker is animated into place, and in my case, when the datepicker is a dropdown, and focus must change to the day when the dropdown is open. I'm looking for buy-in to this idea; if allowed, I'm happy to work on the initial implementation of this feature.