Improve focus capabilities

[GeorgeTaveras1231]

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

const dayPickerRef = React.useRef();

<DayPicker
  ref={dayPickerRef}
/>

Then anywhere in the code, when you want to switch focus to the day, execute:

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.

[gpbl]

@GeorgeTaveras1231 all good points, thanks for your idea. I do think a ref could help with handling the focus better than the prop.

[gpbl]

We plan to implement this feature in v9. See #1833.