React-day-picker: By pressing tab in DayPickerInput, the body element is focused

Created on 29 Dec 2017 · 3Comments · Source: gpbl/react-day-picker

Hey, thanks for a great component - nice with a lightweight and customizable date picker for once!

Using the DayPickerInput breaks the tab flow. If the DayPicker is open (after input gains focus), and you hit tab to move to the next input field the focus is lost. document.activeElement is changed to <body>. I haven't dug into exactly what's going on, but my guess is that the browser tries to set focus to an element inside the DayPicker, which is then lost after it closes.

Because the DayPicker requires focus to catch keyboard events, the keyboard navigation is not working. I don't think you should move the focus to the DayPicker, but it needs to be able to catch the keyboard events from the input field, and preventDefault the ones it uses.

Source

thebuilder

Most helpful comment

I am using react-day-picker v7.1.10 when focus is on input and then pressing tab again focus is going on body, looks like issue still persist or I am missing something ?

naisergic on 14 Aug 2018

👍3

All 3 comments

Maybe this PR will fix this? https://github.com/gpbl/react-day-picker/pull/588 (going to merge it soon)

gpbl on 29 Dec 2017

This is fixed in v7.0.6! Thanks for reporting the bug 👍

gpbl on 1 Jan 2018

I am using react-day-picker v7.1.10 when focus is on input and then pressing tab again focus is going on body, looks like issue still persist or I am missing something ?

naisergic on 14 Aug 2018

👍3

Was this page helpful?

0 / 5 - 0 ratings