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

Dropdown menu doesn't close when tabbing from an input #100

Open
madoci opened this issue Mar 26, 2024 · 0 comments
Open

Dropdown menu doesn't close when tabbing from an input #100

madoci opened this issue Mar 26, 2024 · 0 comments

Comments

@madoci
Copy link

madoci commented Mar 26, 2024

Describe the bug

When an input is the last focusable element of a Dropdown menu, tabbing from this element change the focus to the next focusable element outside the menu, but does not close the menu.

To Reproduce

Steps to reproduce the behavior:

  1. Create a Dropdown with a toggle and a menu containing a text input, and another input after and oustide the Dropdown.
  2. Open the menu by clicking the toggle.
  3. Focus the text input inside the menu.
  4. Type the 'Tab' key to focus the input outside the Dropdown.
  5. The menu stays open.

Reproducible Example

Minimal example by using CodeSandbox.

Expected behavior

The menu should close when tabbing out from the menu.

Screenshots

dropdown-tab-bug

Environment (please complete the following information)

  • Operating System: debian
  • Chrome, Version 123.0.6312.58
  • react-restart/ui Version 1.6.8

Additional context

I believe it can be solved by adding a key !== 'Tab' condition to Dropdown.tsx:279 like so :

if (
  isInput &&
  (key === ' ' ||
    (key !== 'Escape' && key !== 'Tab' && fromMenu) ||
    (key === 'Escape' && (target as HTMLInputElement).type === 'search'))
) {
  return;
}

If the 'Tab' key does not change focus and is instead used as a tabulation inside the text input, the next keyup event would have that input as a target and the menu will not be toggled.

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

No branches or pull requests

1 participant