react-dates icon indicating copy to clipboard operation
react-dates copied to clipboard

DateRangePicker doesn't follow a correct focus path on key navigation

Open valerojasm opened this issue 3 years ago • 1 comments

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 ezgif com-gif-maker

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.

valerojasm avatar Mar 01 '22 15:03 valerojasm

I've ran to this same issue. The SingleDatePicker works fine with tab navigation, but the DateRangePicker doesnt seem to close after end date.

Rhaxis avatar Jul 13 '22 08:07 Rhaxis