You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
On the current preview branch (React 19 + @headlessui/react 2.2.10), headlessui-based dropdowns (state, priority, member, module, cycle, date, etc.) are broken in two ways:
Wrong position: dropdown content renders at the top-left corner of the page (left: 0; top: 0) instead of next to its trigger button.
Options not clickable: for combobox-style dropdowns that render Combobox.Input inside the portaled Combobox.Options, clicking an option does nothing — the options wrapper is marked inert + aria-hidden.
Expected: dropdowns open anchored to their trigger and options are clickable.
Steps to reproduce
Run the current preview branch (React 19.2.x, @headlessui/react 2.2.10).
Open any work item detail page.
Click the state / priority / assignee dropdown trigger.
Observe the dropdown content appearing at the top-left corner of the page; in combobox dropdowns (e.g. member select with search input), options cannot be clicked.
Root cause analysis
Two separate upstream headlessui v2 behaviors combine here:
Frozen clobbers child refs.Combobox.Options (and other overlays) wrap children in the internal Frozen component, which does cloneElement(child, { ref }). Since no ref is forwarded to Frozen, that config ref is null and it overrides the child's own ref, so ref={setPopperElement} on popper content never fires. With popperElement stuck at null, react-popper never creates an instance and the dropdown keeps its initial left:0/top:0 position. (Became visible after the React 19 upgrade in chore: upgrade React to 19 and React Router to 8 #9530, which bumped headlessui v1 → v2.2.10.)
useInertOthers over-marks inert subtrees.Combobox.Options is modal by default and marks every element that does not contain an allowed element as inert. Because these dropdowns render Combobox.Inputinside the portaled options and wrap options in a scrollable div, that wrapper receives inert + aria-hidden, making all options unclickable. Upstream: Inert is over extending into elements inside the combo box tailwindlabs/headlessui#3421 (open since Aug 2024).
Related: #9694 fixed the headlessui v2 Fragment-check crash from the same React 19 upgrade; this issue covers the remaining positioning/interactivity regressions.
I have a fix ready as a pnpm patch for @headlessui/react@2.2.10 and will open a PR referencing this issue.
Environment
Production / self-hosted and local dev on preview branch
Is there an existing issue for this?
Current behavior
On the current
previewbranch (React 19 +@headlessui/react2.2.10), headlessui-based dropdowns (state, priority, member, module, cycle, date, etc.) are broken in two ways:left: 0; top: 0) instead of next to its trigger button.Combobox.Inputinside the portaledCombobox.Options, clicking an option does nothing — the options wrapper is markedinert+aria-hidden.Expected: dropdowns open anchored to their trigger and options are clickable.
Steps to reproduce
previewbranch (React 19.2.x,@headlessui/react2.2.10).Root cause analysis
Two separate upstream headlessui v2 behaviors combine here:
Frozenclobbers child refs.Combobox.Options(and other overlays) wrap children in the internalFrozencomponent, which doescloneElement(child, { ref }). Since no ref is forwarded toFrozen, that config ref isnulland it overrides the child's own ref, soref={setPopperElement}on popper content never fires. WithpopperElementstuck atnull,react-poppernever creates an instance and the dropdown keeps its initialleft:0/top:0position. (Became visible after the React 19 upgrade in chore: upgrade React to 19 and React Router to 8 #9530, which bumped headlessui v1 → v2.2.10.)useInertOthersover-marks inert subtrees.Combobox.Optionsis modal by default and marks every element that does not contain an allowed element as inert. Because these dropdowns renderCombobox.Inputinside the portaled options and wrap options in a scrollable div, that wrapper receivesinert+aria-hidden, making all options unclickable. Upstream: Inert is over extending into elements inside the combo box tailwindlabs/headlessui#3421 (open since Aug 2024).Related: #9694 fixed the headlessui v2 Fragment-check crash from the same React 19 upgrade; this issue covers the remaining positioning/interactivity regressions.
I have a fix ready as a pnpm patch for
@headlessui/react@2.2.10and will open a PR referencing this issue.Environment
Production / self-hosted and local dev on
previewbranchBrowser
Google Chrome
Version
preview branch (post React 19 upgrade,
@headlessui/react2.2.10)