makeplane / makeplane/plane

[bug]: Dropdown options unselectable on React 19 — react-popper panel never positions when building web from source

Open
#9,857 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
59.6k
Forks
5.8k
Avg merge
1d 22h
Merged PRs (30d)
49

Description

Current Behavior

When the web app is built from source (v1.4.2, React 19.2.8), dropdown panels open but options cannot be selected. Affected dropdowns include state, priority, member, cycle, module, estimate, project and intake — e.g. in the "create work item" modal, clicking any option in the state dropdown does nothing.

Steps to Reproduce
  1. Build web from source using apps/web/Dockerfile.web (turbo prune → pnpm turbo run build --filter=web).
  2. Open the web app, create/open any work item modal.
  3. Open the state (or priority/cycle/module/member) dropdown.
  4. Click any option — nothing happens. No network request, no console error.
Root Cause

react-popper@2.3.0 receives the trigger button and panel DOM through callback refs (ref={setReferenceElement} / ref={setPopperElement} wired to useState setters). Under React 19, a disrupted render can drop those callback invocations, leaving the state null forever. usePopper's layout effect then returns early on its null guard, createPopper never runs (the panel has no data-popper-placement attribute), Combobox.Options stays at 0x0, and headlessui classifies every option click as an outside click.

Evidence collected from a live repro (React fiber inspection): referenceElement resolves to the button, popperElement stays null, styles.popper remains {position:'absolute',left:'0',top:'0'}, zero requests on click. Manually applying the expected fixed positioning to the panel makes option clicks work immediately.

Note: pnpm-workspace.yaml already documents that react-popper 2.3.0 was accepted on React 19 ("only uses hooks — runs unchanged"). That analysis holds for the happy path, but not for ref callbacks dropped across render interruptions.

Environment
  • Self-hosted, built from source @ v1.4.2 (makeplane/plane master)
  • react 19.2.8, react-popper 2.3.0, @headlessui/react 2.2.10
Suggested Fix

Add DOM-recovery effects next to each usePopper call: when the ref state is null while the dropdown is open, locate the mounted trigger button / currently open panel (ul[data-headlessui-state="open"]) and feed it back into popper. A PR with this recovery for the affected dropdown components follows. Long-term, migrating off the archived react-popper to @floating-ui/react would remove the whole class of issues.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with apps/web/Dockerfile.web and the affected dropdown components' usePopper calls, then reproduce with the listed pnpm turbo build command. Verify that each open panel receives data-popper-placement and that options in the state or priority dropdown can be selected without the click being treated as outside.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.