Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React v2.1.1 positions ListboxOptions without anchor attribute set #3336

Closed
RobinMalfait opened this issue Jun 27, 2024 Discussed in #3335 · 2 comments · Fixed by #3337
Closed

React v2.1.1 positions ListboxOptions without anchor attribute set #3336

RobinMalfait opened this issue Jun 27, 2024 Discussed in #3335 · 2 comments · Fixed by #3337

Comments

@RobinMalfait
Copy link
Member

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:
Bildschirmfoto 2024-06-27 um 12 05 12

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
Copy link
Member Author

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
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants