headlessui

Files

T

Robin Malfait 17b2d34fe6 Improve performance of Combobox component (#2574 )

* add countries data and combobox example

* directly push to the options array

No need to spread here because this will slow things down tremendously.
If you add 5 options, then this will happen:

```js
let options = []
options = [...options, 1]
options = [...options, 2]
options = [...options, 3]
options = [...options, 4]
options = [...options, 5]
```

It's making a lot of copies and has to spread everything it just copied
again. Instead, let's just push to the array:

```js
let options = []
options.push(1)
options.push(2)
options.push(3)
options.push(4)
options.push(5)
```

* only sort options by DOM node once

When registering 50 options, we will re-sort the options based on the DOM
node position for every option that gets registered. This is overkill
and unnecessary. The re-sorting is useful if an option is injected
between 2 options. When we sort the full list for _every_ `registerOption`
call then the result after the last `registerOption` will be the same if
we only sorted after the last `registerOption` call only.

This will ensure that we are skipping a ton of work and only do the work
once at the end where it matters.

* debounce the `goToOption` call until the next frame

This will allow us to perform the task of `goToOption` once instead of
`n` times if they happen really fast after eachother.

This can happen when you are leaving option B and going to option A.
Then the following steps happen:

- Leaving Option B `goToOption(Nothing)`
- Entering Option A `goToOption(A)`

Both will re-render everything because the internal active option index
would be changed. But only the last `goToOption(A)` is the interesting
version here.

We could also move the `goToOption(Nothing)` to the `ComboboxOptions`
(wrapper) itself instead of adding these listeners on each individual
`ComboboxOption`. However, if you add an additional visual piece of DOM
above or between the options, hovering that would not leave the
`ComboboxOptions` and therefore the last `ComboboxOption` would still be
active which we don't want.

* update changelog

2023-07-05 11:10:19 +02:00