headlessui

Files

T

Robin Malfait 6897d2ccf1 Fix required double ArrowDown requirement (#1281 )

* 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

2022-03-29 18:52:44 +02:00

build

improve build files

2022-01-31 00:10:06 +01:00

src

Fix required double ArrowDown requirement (#1281 )

2022-03-29 18:52:44 +02:00

types

Improve overal codebase, use modern tech like esbuild and TypeScript 4! (#1055 )

2022-01-27 17:07:38 +01:00

jest.config.cjs

convert .js to .cjs

2022-01-31 12:29:27 +01:00

package.json

Add multi value support for Listbox & Combobox (#1243 )

2022-03-16 15:14:47 +01:00

README.md

Improve overal codebase, use modern tech like esbuild and TypeScript 4! (#1055 )

2022-01-27 17:07:38 +01:00

tsconfig.json

Add <form> compatibility (#1214 )

2022-03-09 11:24:45 +01:00

README.md

@headlessui/react

A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.

Installation

# npm
npm install @headlessui/react

# Yarn
yarn add @headlessui/react

Documentation

For full documentation, visit headlessui.dev.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Headless UI on GitHub

For casual chit-chat with others using the library:

Join the Tailwind CSS Discord Server