tailwindlabs
Listbox button width is incorrect when the parent Popover has a scale transition
The Listbox button width is incorrect when the parent Popover has a scale transition applied. The Popover transitions is from scale of 0.9 to 1. During this animation, the Listbox button retains its width based on the scaled state (0.9) instead of updating to the final size (1).
What package within Headless UI are you using? @headlessui/react v2.2.0
What browser are you using? Chrome
Reproduction URL Please test repro in window size lg+. headlessui-listbox-button-width-repro.git codesandbox
This is still an issue with v2.2.4. The codesandbox link above is private so I put together a minimal repro: codesandbox.
It contains a Listbox within a Dialog, and the ListboxOptions always has style={{ width: "var(--button-width)" }}.
- With the "Toggle Scaling" checkbox disabled, the dialog opens immediately and then when clicking the listbox button, the options panel is exactly the width of the button. This is the expected behavior.
- With the "Toggle Scaling" checkbox enabled, the dialog will open with
transform: scale(0.5)and transition totransform: scale(1). When clicking the listbox button in this scenario, the options panel will be exactly 50% of the width of the button.
I've tested this in Safari 18.5, Firefox 139.0.1, and Chrome 137.0.7151.69.
This should be fixed by #3786, and will be available in the next release.
You can already try it using:
npm install @headlessui/react@insiders.
