Skip to content

fix: patch headlessui Frozen and useInertOthers to restore dropdown positioning and interactivity - #9751

Open
Liewzheng wants to merge 2 commits into
makeplane:previewfrom
Liewzheng:fix/headlessui-popper-positioning
Open

fix: patch headlessui Frozen and useInertOthers to restore dropdown positioning and interactivity#9751
Liewzheng wants to merge 2 commits into
makeplane:previewfrom
Liewzheng:fix/headlessui-popper-positioning

Conversation

@Liewzheng

@Liewzheng Liewzheng commented Sep 3, 2026

Copy link
Copy Markdown

Description

Fixes headlessui-based dropdowns (state, priority, member, module, cycle, date, etc.) being broken on preview after the React 19 upgrade (#9530, headlessui v1 → v2.2.10):

  1. Dropdowns stuck at top-left corner (left:0/top:0) — headlessui's internal Frozen component does cloneElement(child, { ref }) with a null config ref when no ref is forwarded, clobbering the child's own ref. ref={setPopperElement} therefore never fires, popperElement stays null, and react-popper never creates an instance.
  2. Combobox options unclickableuseInertOthers marks every element not containing an allowed element as inert. Since these dropdowns render Combobox.Input inside the portaled Combobox.Options and wrap options in a scrollable div, that wrapper gets inert + aria-hidden (upstream: Inert is over extending into elements inside the combo box tailwindlabs/headlessui#3421).

The fix extends the pnpm patch mechanism already used for react-color:

  • Patch Frozen to return the child untouched when no ref is forwarded, restoring popper positioning for all headlessui-based dropdowns.
  • Patch useInertOthers to also skip descendants of allowed elements (with a null guard for not-yet-registered refs), keeping the options subtree interactive.

Type of Change

  • Bug fix (non-breaking change which fixes an issue)

Test Scenarios

  • Ran the web app on this branch and verified state / priority / member / module / cycle / date dropdowns open anchored to their triggers instead of the page's top-left corner.
  • Verified combobox dropdowns with a search input (e.g. member select) allow clicking options again (options wrapper no longer receives inert / aria-hidden).
  • pnpm install --frozen-lockfile passes with the new patch_hash entries.

References

Closes #9750

Summary by CodeRabbit

  • Chores
    • Updated the project’s dependency configuration to apply a compatibility patch for Headless UI React version 2.2.10.

Combobox.Options (and other headlessui overlays) wrap their 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 dropdowns stay at their initial
left:0/top:0 position (top-left corner of the page) on React 19.

Patch Frozen to return the child untouched when no ref is forwarded.
This restores popper positioning for all headlessui-based dropdowns
(date, state, member, module, cycle, priority, etc.).
…tive

Combobox.Options (modal by default) marks every element that does not
contain an allowed element (input/button/options) as inert. Because the
dropdowns render Combobox.Input inside the portaled Combobox.Options and
wrap the options in a scrollable div, that wrapper got inert +
aria-hidden, making all options unclickable (upstream:
tailwindlabs/headlessui#3421).

Extend the existing pnpm patch so useInertOthers also skips descendants
of allowed elements (with a null guard for not-yet-registered refs).
@coldtea-pr-lens

coldtea-pr-lens Bot commented Sep 3, 2026

Copy link
Copy Markdown

◈ PR Lens

🟢 +1 new · 🟠 ~0 changed · 🔴 -0 removed · 0 flows · 3 files · commit dac9934


Architecture

Architecture diagram for makeplane/plane at dac9934

1 component touched across 1 lane.

Open full size


Data flow

No data-flow sequence changed in this PR.


Drill down
Client Applications — 1 component
🟢 NEW Headless UI Patch (@⁠headlessui/react)

Patches @headlessui/react 2.2.10 to preserve child component refs in Frozen and correct inertness tree traversal.


View

  • Architecture lens
  • Data flow lens
  • Expand every detail
  • Show unchanged neighbours

Tip

Push a new commit and the whole comment re-renders for the new head. An older run never overwrites a newer one, so a slow render cannot put a stale diagram back.

🪧 More tips
  • Run PR Lens on your own machine: npx skills add coldteadotai/pr-lens installs the agent skill. Then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
  • Draw a diff before it is even a pull request: npx @coldtea/pr-lens-cli analyze --base origin/main reads the diff with your own model key, and npx @coldtea/pr-lens-cli render .pr-lens/graph.json draws the same lenses on your machine.
  • The boxes under View are live. Tick Architecture lens or Data flow lens to choose which diagrams appear, or Expand every detail to open every drill-down at once. The comment redraws in place a few seconds later.
  • Show unchanged neighbours lists the components this change did not touch alongside the ones it did, so the drill-down shows what the changed code sits next to.
  • GitHub will not let you zoom an image in a comment. The link under each diagram opens it full size on a page of its own, where you can.
  • The CLI's render picks up .github/pr-lens.yml automatically and applies your corrections (renames, exclusions, lane pins) at draw time.
  • Would you rather run it from CI on a key of your own? Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and a model key in your repository secrets, say GEMINI_API_KEY. The Action asks Gemini by default, or OpenAI and any endpoint speaking /chat/completions through its provider input.
  • PR Lens is free for open source. A star on the repository is what keeps it going.
  • The diagrams follow your GitHub theme, so dark mode gets the dark render and light mode the light one, and the moving dots show this pull request's data in motion.

◈ Rendered by PR Lens · crafted with ❤️ by the Coldtea team · Come say hi on Discord

@CLAassistant

CLAassistant commented Sep 3, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@coderabbitai

coderabbitai Bot commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 623a7282-72c0-40cf-9ac9-63463589c6dd

📥 Commits

Reviewing files that changed from the base of the PR and between da1a7ab and dac9934.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (2)
  • patches/@headlessui__react@2.2.10.patch
  • pnpm-workspace.yaml

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.


📝 Walkthrough

Walkthrough

The workspace configuration registers a pnpm patch for @headlessui/react@2.2.10.

Changes

Headless UI patch

Layer / File(s) Summary
Register Headless UI patch
pnpm-workspace.yaml
Adds @headlessui/react@2.2.10 to patchedDependencies and points it to the corresponding patch file.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: ⚪ Minimal · up to dac99

The dependency patch registration enables the intended dropdown fixes with no identified current merge-blocking risk.

Suggested reviewers: sriramveeraghanta

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Linked Issues check ❓ Inconclusive The description addresses both requirements from issue #9750, but the raw summary only confirms the pnpm patched dependency entry. It does not provide reviewable evidence of the Frozen and useInertOth… Provide the patch file or a raw summary of its changes so the Frozen ref-preservation fix and useInertOthers descendant-handling fix can be verified against issue #9750. The excluded pnpm-lock.yaml does not prevent assessment of these codin…
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the Headless UI patch and the two user-facing fixes: dropdown positioning and interactivity.
Description check ✅ Passed The description is complete. It includes the problem, root causes, implementation approach, bug-fix classification, test scenarios, and issue reference. Screenshots are optional.
Out of Scope Changes check ✅ Passed The reviewed change adds a pnpm patch entry for @headlessui/react, which directly supports the stated dropdown positioning and interactivity fixes. No unrelated changes are shown.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Full details: Linked Issues check

Explanation

The description addresses both requirements from issue #9750, but the raw summary only confirms the pnpm patched dependency entry. It does not provide reviewable evidence of the Frozen and useInertOthers patch implementations.

Resolution

Provide the patch file or a raw summary of its changes so the Frozen ref-preservation fix and useInertOthers descendant-handling fix can be verified against issue #9750. The excluded pnpm-lock.yaml does not prevent assessment of these coding requirements.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

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 this pull request may close these issues.

🐛 Bug: headlessui dropdowns render at top-left corner and options are unclickable (React 19 + headlessui v2)

2 participants