Robin Malfait
0e1599b464
* menu should not trap focus for tab key * introduce `focusFrom` focus management utility This is internal API, and the actual API is not 100% ideal. I started refactoring this in a separate branch but it got out of hand and touches a bit more pieces of the codebase that aren't related to this PR at all. The idea of this function is just so that we can go Next/Previous but from the given element not from the document.activeElement. This is important for this feature. We also bolted this ontop of the existing code which now means that we have this API: ```js focusIn([], Focus.Previouw, true, DOMNode) ``` Luckily it's internal API only! * ensure closing via Tab works as expected Just closing the Menu isn't 100% enough. If we do this, it means that when the Menu is open, we press shift+tab, then we go to the Menu.Button because the Menu.Items were the active element. The other way is also incorrect because it can happen if you have an `<a>` element as one of the Menu.Item elements then that `<a>` will receive focus, then the `Menu` will close unmounting the focused `<a>` and now that element is gone resulting in `document.body` being the active element. To fix this, we will make sure that we consider the `Menu` as 1 coherent component. This means that using `<Tab>` will now go to the next element after the `<Menu.Button>` once the Menu is closed. Shift+Tab will go to the element before the `<Menu.Button>` even though you are currently focused on the `Menu.Items` so depending on the timing you go to the `Menu.Button` or not. Considering the Menu as a single component it makes more sense use the elements before / after the `Menu` * update changelog Co-authored-by: Enoch Riese <enoch.riese@gmail.com>
Headless UI
A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Documentation
For full documentation, visit headlessui.dev.
Installing the latest version
You can install the latest version by using:
npm install @headlessui/react@latestnpm install @headlessui/vue@latest
Installing the insiders version
You can install the insiders version (which points to whatever the latest commit on the main branch is) by using:
npm install @headlessui/react@insidersnpm install @headlessui/vue@insiders
Note: The insiders build doesn't follow semver and therefore doesn't guarantee that the APIs will be the same once they are released.
Packages
| Name | Version | Downloads |
|---|---|---|
@headlessui/react |
 |
 |
@headlessui/vue |
 |
 |
@headlessui/tailwindcss |
 |
 |
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using the library:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Headless UI, please read our contributing docs before submitting a pull request.