Robin Malfait
d31bb5c08e
* sort DOM nodes using tabIndex first It will still keep the same DOM order if tabIndex matches, thanks to stable sorts! * refactor `focusIn` API All the arguments resulted in usage like `focusIn(container, Focus.First, true, null)`, and to make things worse, we need to add something else to this list in the future. Instead, let's keep the `container` and the type of `Focus` as known params, all the other things can sit in an options object. * fix FocusTrap escape due to strange tabindex values This code will now ensure that we can't escape the FocusTrap if you use `<tab>` and you happen to tab to an element outside of the FocusTrap because the next item in line happens to be outside of the FocusTrap and we never hit any of the focus guard elements. How it works is as follows: 1. The `onBlur` is implemented on the `FocusTrap` itself, this will give us some information in the event itself. - `e.target` is the element that is being blurred (think of it as `from`) - `e.currentTarget` is the element with the event listener (the dialog) - `e.relatedTarget` is the element we are going to (think of it as `to`) 2. If the blur happened due to a `<tab>` or `<shift>+<tab>`, then we will move focus back inside the FocusTrap, and go from the `e.target` to the next or previous value. 3. If the blur happened programmatically (so no tab keys are involved, aka no direction is known), then the focus is restored to the `e.target` value. Fixes: #1656 * update changelog
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.