fix: dropdown stays open when clicking Inertia Link items

[Rat01047]

Problem:

When a DropdownItem wraps a child that calls event.preventDefault() on click
(e.g. an Inertia <Link>), Headless UI's merged click handler detects the flag and
bails out before invoking close(). This leaves the dropdown menu open after the
user clicks an item.

Additionally, the render-prop API used the deprecated active prop from Headless UI v1.

Changes:

src/Components/Dropdown/DropdownItem.tsx

• Replaced { active } with { focus, close } in the Menu.Item render prop —
  focus is the Headless UI v2 replacement for the deprecated active prop.
• Updated the className condition from active → focus.
• Added onClickCapture={close} to the wrapper <div> — the capture phase fires
  before any child handler can call preventDefault(), guaranteeing the menu always
  closes on click regardless of child behaviour.

Why onClickCapture instead of onClick:

React's onClick runs in the bubble phase. If a child calls event.preventDefault()
first, Headless UI's merged handler sees the flag and skips close(). onClickCapture
runs top-down (parent before child), so close() is called unconditionally before the
child even sees the event.

Testing:

• Verified npm run build (tsc + Vite) exits 0 with no type errors.
• Manual test: dropdown closes correctly when item wraps a plain <a>, an Inertia
  <Link>, and a button with event.preventDefault().

Summary by CodeRabbit

• Bug Fixes
  • Improved dropdown item click behavior to ensure dropdowns close more reliably when items are selected.
  • Fixed dropdown item visual state handling to better reflect focus and interaction states.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tail-react	Ready	Preview, Comment	Apr 17, 2026 6:09am

[coderabbitai]

Walkthrough

The DropdownItem component's Menu.Item render-prop callback was refactored to consume focus and close parameters instead of active. The active class condition was updated to check focus instead of active, and a click capture handler using close was added to the inner <div>.

Changes

Cohort / File(s)	Summary
DropdownItem Updates src/Components/Dropdown/DropdownItem.tsx	Updated Menu.Item callback signature from active to focus and close parameters; changed active class condition to use focus; registered onClickCapture={close} on inner div to execute Headless UI close handler during capture phase.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A dropdown dancing with a focus so bright,
No longer chasing active—the spotlight is right!
Click capture comes quick with the close handler's might,
Our menu now glimmers with functional delight! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title directly addresses the main change: updating dropdown close behavior to work with Inertia Link items by fixing event handling during click capture phase.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/dropdown-item-close-on-click

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[itsrafsanjani]

LGTM