[DOCS]: wrong ul>li usage in Listbox example code

[pschaub]

During upgrading my code to the latest Headless UI version, I've seen that the default tags of ListboxOptions and ListboxOption changed, see https://github.com/tailwindlabs/headlessui/pull/3109

I want that my code behaves the same so I was looking for an example in the documentation to change the type back to ul/li on ListboxOptions and ListboxOption.

There I've found this example code:

    <Listbox as="ul" value={selectedPerson} onChange={setSelectedPerson}>
      <ListboxButton as={MyCustomButton}>{selectedPerson.name}</ListboxButton>
      <ListboxOptions anchor="bottom" as="li">
        {people.map((person) => (
          <ListboxOption as="span" key={person.id} value={person} className="data-[focus]:bg-blue-100">
            {person.name}
          </ListboxOption>
        ))}
      </ListboxOptions>
    </Listbox>

I would expect that

• as="ul" is used on ListboxOptions
• as="li" is used on ListboxOption

So I suggest to update the documentation example accordingly:

    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
      <ListboxButton as={MyCustomButton}>{selectedPerson.name}</ListboxButton>
      <ListboxOptions anchor="bottom" as="ul">
        {people.map((person) => (
          <ListboxOption as="li" key={person.id} value={person} className="data-[focus]:bg-blue-100">
            {person.name}
          </ListboxOption>
        ))}
      </ListboxOptions>
    </Listbox>

[thecrypticace]

Whoops, appreciate you pointing this out! I've fixed the example code to use ul for ListboxOptions and li for ListboxOption. 👍