Improve UX by freezing `<ComboboxOptions />` component while closing #3304

RobinMalfait · 2024-06-20T12:29:10Z

This PR improves the UX when you are closing a Combobox that uses a Transition while closing.

Typically the Combobox component is used with a filtered list based on the value of the ComboboxInput. When the Combobox closes then the onClose will be called. In this function you typically reset the search query state as well:

import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Combobox value={selectedPerson} onChange={setSelectedPerson} onClose={() => setQuery('')}>
      <ComboboxInput
        aria-label="Assignee"
        displayValue={(person) => person?.name}
        onChange={(event) => setQuery(event.target.value)}
      />
      <ComboboxOptions anchor="bottom" className="empty:hidden">
        {filteredPeople.map((person) => (
          <ComboboxOption key={person.id} value={person} className="data-[focus]:bg-blue-100">
            {person.name}
          </ComboboxOption>
        ))}
      </ComboboxOptions>
    </Combobox>
  )
}

Notice that we use setQuery('') in the onClose.

If you are using a transition, then the following things will happen:

The Combobox is closed
The onClose is triggered, the ComboboxOptions are transitioning out
The query is reset
The filteredPeople list is updated (not filtered yet)
The ComboboxOptions re-renders with the "full" list instead of the filtered list.
The Transition completes after this.

This now means that while transitioning out, the ComboboxOptions is re-rendering with a new list of options even though you just selected an option.

This PR now will "freeze" that state so that we show the contents at the time of closing the Combobox.

When the `Combobox` is in a closed state, but still visible (aka transitioning out), then we want to freeze the `children` of the `ComboboxOptions`. This way we still look at the old list while transitioning out and you can safely reset any `state` that filters the options in the `onClose` callback. Note: we want to only freeze the children of the `ComboboxOptions`, not the `ComboboxOptions` itself because we are still applying the necessary data attributes to make the transition happen. Similarly, if you are using the `virtual` prop, then we only freeze the `virtual.options` and render the _old_ list while transitioning out.

vercel · 2024-06-20T12:29:12Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2024 2:05pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2024 2:05pm

packages/@headlessui-react/src/components/listbox/listbox.tsx

RobinMalfait · 2024-06-20T12:33:35Z

packages/@headlessui-react/src/internal/frozen.tsx

+  // We should keep updating the frozen value, as long as we shouldn't freeze
+  // the value yet. The moment we should freeze the value we stop updating it
+  // which allows us to reference the "previous" (thus frozen) value.
+  if (!freeze && frozenValue !== data) {
+    setFrozenValue(data)
+  }


This is nice because we don't use any effects, but it will trigger a setFrozenValue every time the data changes. Ideally we only change this state the moment we go from false to true and capture the old value somehow. 🤔

RobinMalfait · 2024-06-20T12:34:06Z