Skip to content
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

Fix keyboard navigation issues #2143

Closed

Conversation

danielmag
Copy link

@danielmag danielmag commented Sep 6, 2021

Opening this to see if we can finally merge this fix. On the previous PR (#2084) we have not gotten the final approval from the user that requested changes.

Original message by greglo in PR #2084:

Keyboard navigation is broken for the date range picker. The following bugs exist:

  • When passing through the component with tab-navigation, after exiting the end-date input the dropdown does not close [1]
  • When attempting to enter values into the end-date dropdown, users would have to tab backwards back to the dropdown to enter values [2]

The simplest and clearest solution that came to be is simply to put the day picker after the currently active input. In this way, the dropdown always appears next in the tab-order to the input the user has selected. The existing blur handler in the dropdown means that tabbing through the component will leave the dropdown closed at the end.

The react keys ensure that the element is just moved over in the DOM and so there is no flickering.

Fixes #1809

@majapw

[1] Before, passing through the component using tab
https://user-images.githubusercontent.com/2872321/106044360-7dfb9c80-6094-11eb-86a5-9e2f2b4f71b0.gif

[2] Before, enter values with keyboard
https://user-images.githubusercontent.com/2872321/106044357-7d630600-6094-11eb-90a6-f5c554303691.gif

[3] After, passing through the component using tab
https://user-images.githubusercontent.com/2872321/106044352-7c31d900-6094-11eb-9164-0e00a33db517.gif

@danielmag
Copy link
Author

Not sure why the build is failing 🤔. It was working for the other PR with exactly the same changes

@ljharb
Copy link
Member

ljharb commented Sep 6, 2021

Please, never ever ever open a duplicate PR. This is now permanent pollution on the repo, and it will have to be kept in sync with #2084 until both can be merged.

@ljharb ljharb marked this pull request as draft September 6, 2021 16:40
@danielmag
Copy link
Author

danielmag commented Sep 6, 2021

Sorry about that @ljharb. Was not sure how to proceed in this case. I wanted to unblock the other PR since we are waiting for an answer for more than a month and this is a blocker for some of our accessibility tickets. Would you be able to reply on the other PR? I'm now working on this instead of greg.

Really appreciate your help reviewing the PRs 🙇

@ljharb
Copy link
Member

ljharb commented Sep 6, 2021

Literally your only option is to wait, as long as it takes. You have no control over the outcome (when it's waiting on maintainers, at least) and there is NOTHING you can do to hurry it along. I'm sorry that's frustrating, but that doesn't change what you need to accept.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DRP: drop down not closing when (forward) tabbing out of focus
2 participants