fix(Combobox): keep content open when interacting with associated label

[benjamincanac]

🔗 Linked issue

❓ Type of change

• 🐞 Bug fix (a non-breaking change that fixes an issue)

📚 Description

A <label> associated (via for) with a control inside the combobox forwards its click/focus to that control. Without accounting for this, clicking such a label while the combobox is open dismissed the content on pointerdown, and the forwarded click/focus then immediately re-opened it, which felt broken.

Added an isEventTargetWithinCombobox helper that treats a label whose control lives inside the combobox as "inside", so pointerDownOutside/focusOutside no longer dismiss in that case.

Added two tests: an associated label keeps the content open, an unrelated label still dismisses.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

Summary by CodeRabbit

• Bug Fixes

  • Improved Combobox popup handling with associated labels. When clicking a label explicitly linked to the input, the popup now correctly remains open. Unrelated labels still dismiss the popup as expected.

• Tests

  • Added test coverage for pointer interactions between labels and the Combobox component.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 52bddfe0-4ba7-456e-98ad-c22ecc290c87

📥 Commits

Reviewing files that changed from the base of the PR and between bb0c552 and 7fe0c5c.

📒 Files selected for processing (2)

• packages/core/src/Combobox/Combobox.test.ts
• packages/core/src/Combobox/ComboboxContentImpl.vue

---

📝 Walkthrough

Walkthrough

The PR enhances Combobox to prevent unwanted popup dismissal when users interact with <label> elements that are associated with the Combobox input via the label's for attribute. A new helper function evaluates whether event targets fall within the combobox or are associated labels, and the focus/pointer-outside handlers use this logic to conditionally prevent dismiss. Tests verify the expected behavior.

Changes

Combobox Label-aware Dismiss Prevention

Layer / File(s)	Summary
Label-within-combobox detection helper packages/core/src/Combobox/ComboboxContentImpl.vue	isEventTargetWithinCombobox(target) helper determines if an event target should be treated as inside the combobox, including special handling for <label> elements whose associated control is inside the combobox.
Dismiss handler integration packages/core/src/Combobox/ComboboxContentImpl.vue	@focus-outside and @pointer-down-outside handlers updated to use isEventTargetWithinCombobox instead of direct parent containment checks, preventing dismiss when interacting with the combobox or its associated labels.
Label interaction tests packages/core/src/Combobox/Combobox.test.ts	New test suite verifies that pointer interactions with associated labels keep the popup open, while interactions with unrelated labels trigger popup dismissal as expected.

Possibly Related PRs

• unovue/reka-ui#2393: Modifies the same Combobox focus/pointer-outside dismissal code paths, so the label-target logic is closely tied to existing outside-interaction handling.

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A label befriends a combobox so fine,
No more surprise vanish—they stay aligned!
Pointer and focus now know the way,
Associated labels? They're here to stay! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main fix: preventing dismissal of Combobox content when interacting with an associated label element.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2686

commit: 7fe0c5c