React v2.1.1 positions ListboxOptions without anchor attribute set

[catyperry]

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.

[ooolzhas]

Hey, this fixes the "position: absolute" bug, but there's still another annoying thing that persists

When the ListboxOptions are open the < html > tag gains a style of "overflow: hidden; padding-right: 0px", which completely breaks my page layout (i have multiple sticky elements that stop working after this, like navbar)

Right now I manually override it with "overflow: visible !important", but pre-2.x it was working out of the box (I was on 1.7 or something)

I would appreciate if you could take a look into this as well

[RobinMalfait]

This is not a bug but on purpose, we made sure that all pop-up like panels are in "modal" mode which enable scroll locking, and making the rest of the page inert to make sure you purely interact with the component while it's open.

You can disable this functionality if you want by setting the modal prop to false: https://headlessui.com/react/listbox#listbox-options

[ooolzhas]

It worked! Thank you