React v2.1.1 positions ListboxOptions without anchor attribute set

[RobinMalfait]

Discussed in #3335

^{Originally posted by catyperry June 27, 2024}
In version 2.1.0 when I wanted to position my ListboxOptions myself I could just to it like this:

<Listbox value={selected} onChange={(value) => setSelected(value)}>
  <div className="relative">
    <ListboxButton>
      <span>{selected.label}</span>
    </ListboxButton>
    <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto">
      {options.map((option) => (
        <ListboxOption key={option.id} value={option}>
              {option.label}
        </ListboxOption>
      ))}
    </ListboxOptions>
  </div>
</Listbox>

no issue here. But in version 2.1.1 a style prop with extra styles overwrites my ListboxOptions classes:

The left top props cause my ListboxOptions to be rendered on top of my ListboxButton instead of below it.
I especially do this because I want to control the max-heightof my ListboxOptions and its overflow (I was not able to get this to work in 2.1.1). And also because I like that this is more explicit imo, in contrast to working with css variables for width and positioning stuff.

Is this new behavior of setting inline styles regardless of whether the anchor prop is set or not intentional? If so i would have to use the anchor prop with the css variables. But this leaves me with the question of how to control the overflow and max-height of the ListboxOptions. I couldn't find a propper answer in the docs.

I very much appreciate every help 🙏

[RobinMalfait]

This should be fixed by #3337, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.

[mohammadzolfali]

<Listbox value={selected} onChange={(value) => setSelected(value)}>

{selected.label} {options.map((option) => ( {option.label} ))}