react-dates
react-dates copied to clipboard
DateRangePicker doesn't follow a correct focus path on key navigation
react-dates version react-dates@^21.8.0
Describe the bug
When DateRangePicker is navigated through with Tab, it does it correctly until reaching input#endDate element, moment where the focus isn't passed to the just expanded calendar but to whatever follows after this input in the DOM tree, thus leaving the calendar expanded when navigating the rest of the web and not allowing users to access this calendar of course.
Source code (including props configuration)
You can navigate this same code snippet uploaded here in Storybook. I'd recommend to create a live expression with document.activeElement to see what is on focus.
Screenshots/Gifs

Desktop (please complete the following information):
- OS: macOS
- Browser: Chrome
- Version: 98
Is the issue reproducible in Storybook? Yes
Additional context Add any other context about the problem here.
I've ran to this same issue. The SingleDatePicker works fine with tab navigation, but the DateRangePicker doesnt seem to close after end date.