downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

Home Page:http://downshift-js.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Document focus reset to body element when menu is open and combobox is tabbed away from (Firefox only)

jbalboni opened this issue · comments

  • downshift version: 8.3.1 (whatever is currently used on the docs site)

Relevant code or config

The "Choose your favorite book" example on https://www.downshift-js.com/use-combobox

What you did:

In Firefox 122, click on the "Choose your favorite book" combobox input and press tab.

What happened:

Focus is set to the body element of the page, rather than the next focusable element after the combobox.

If I click on the input again, click in it once more to hide the list of options, then press tab, focus is correctly set to the next focusable element.

I don't see this issue in Chrome.

Problem description:

Tabbing away from the combobox should work the same if the menu is close or if the menu is open and no item is selected in Firefox.

I also see this behavior in an application I work on that is using Downshift v6. I do not see this behavior in the ARIA combobox examples.

It's not related to downshift, I think there's an issue with the docs/docusaurus and Firefox. Try the usage in a different environment and it should work as expected. Thanks!