New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

By pressing tab in DayPickerInput, the body element is focused #594

Closed
thebuilder opened this Issue Dec 29, 2017 · 3 comments

Comments

3 participants
@thebuilder

thebuilder commented Dec 29, 2017

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.

@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Dec 29, 2017

Owner

Maybe this PR will fix this? #588 (going to merge it soon)

Owner

gpbl commented Dec 29, 2017

Maybe this PR will fix this? #588 (going to merge it soon)

@gpbl gpbl changed the title from DayPickerInput breaks tab and ARIA to By pressing tab in DayPickerInput, the body element is focused Dec 31, 2017

@gpbl gpbl added the bug:minor label Dec 31, 2017

@gpbl gpbl closed this in #596 Dec 31, 2017

@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Jan 1, 2018

Owner

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

Owner

gpbl commented Jan 1, 2018

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

@naisergic

This comment has been minimized.

Show comment
Hide comment
@naisergic

naisergic Aug 14, 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 commented Aug 14, 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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment