Robin Malfait
6897d2ccf1
* fix double arrow down requirement If the `activeOptionIndex` is set to `null`, then we default to the very first non-disabled option. This data is _not_ stored in state because if you as the user go to a specific option, then start searching then we will maintain the active option. This means that we have to **update** the `activeOptionIndex` when options are moving around. While making the first option the active one, we can't store that in state directly otherwise the very first option becomes the active one. If we then inject combobox options _before_ the current one then all of a sudden your active option would jump around a bit. We don't want this jumping to happen, we want the very first option to be the one that's active no matter which option it is. Since this is not stored in state, our keydown handler was a bit borked. Internally it thinks we are still at `activeOptionIndex === null` therefore pressing arrow down would move us to `activeOptionIndex === 0`. To go to the second option, we can press down again which would move us to `activeOptionIndex === 1`. The only issue is that visually we were already at `0`. This fixes that by making sure that if we have `activeOptionIndex === null` that we fallback to the very first non disabled option _before_ we execute the `goToOption()` code. ### Before: **Open combobox**, `activeOptionIndex === null` | Combobox | | ----------------------- | | **Option A** _(active)_ | | Option B | | Option C | **Arrow Down**, `activeOptionIndex === 0` | Combobox | | ----------------------- | | **Option A** _(active)_ | | Option B | | Option C | **Arrow Down**, `activeOptionIndex === 1` | Combobox | | ----------------------- | | Option A | | **Option B** _(active)_ | | Option C | ### After: **Open combobox**, `activeOptionIndex === null` | Combobox | | ----------------------- | | **Option A** _(active)_ | | Option B | | Option C | **Arrow Down**, `activeOptionIndex === 1` | Combobox | | ----------------------- | | Option A | | **Option B** _(active)_ | | Option C | * 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@latestoryarn add @headlessui/react@latest.npm install @headlessui/vue@latestoryarn add @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@insidersoryarn add @headlessui/react@insiders.npm install @headlessui/vue@insidersoryarn add @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 |
 |
 |
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.