Skip to content

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

Merged
zernonia merged 2 commits into
unovue:v2from
benjamincanac:fix/combobox-label-dismiss
Jun 10, 2026
Merged

fix(Combobox): keep content open when interacting with associated label#2686
zernonia merged 2 commits into
unovue:v2from
benjamincanac:fix/combobox-label-dismiss

Conversation

@benjamincanac

@benjamincanac benjamincanac commented Jun 9, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

🔗 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 behavior when interacting with labels: clicking a label linked to the input no longer closes the popup, while clicks on unrelated labels still dismiss it.

  • Tests

    • Added test coverage for pointer interactions between labels and the Combobox to ensure consistent popup handling.

@benjamincanac
fix(Combobox): keep content open when interacting with associated label
7fe0c5c 
A `<label>` tied (via `for`) to a control inside the combobox forwards its
click/focus to that control. Without accounting for this, clicking such a
label while open dismissed the content on `pointerdown`, then the forwarded
click/focus immediately re-opened it.
@coderabbitai

coderabbitai Bot commented Jun 9, 2026 •
edited
Loading

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: Pro

Run ID: c6824361-aa4a-4b20-a041-131618bf9f94

📥 Commits

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

📒 Files selected for processing (1)
  • packages/core/src/Combobox/Combobox.test.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/core/src/Combobox/Combobox.test.ts
📝 Walkthrough

Walkthrough

Adds label-aware dismiss prevention to Combobox: a helper treats labels whose for target is inside the combobox as inside, and focus/pointer-outside handlers use it to avoid dismissing the popup. Tests verify pointerdown on associated labels keeps the popup open while unrelated labels dismiss it.

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 <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

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nudge the label, soft and spry,
The combobox stays — it does not fly.
Pointer taps and focus play,
Together they now know the way.
Hooray for labels that don't make it stray!

🚥 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 directly and clearly summarizes the main change: fixing the Combobox to keep its content open when interacting with an associated label, which is the core problem addressed by the PR.
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

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

@pkg-pr-new

pkg-pr-new Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown

Open in StackBlitz

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

commit: 5b5ff17

@zernonia @claude
test(Combobox): wait for async dismiss in associated-label test
5b5ff17 
The 'stays open' assertion ran after a single nextTick, but a real dismiss
is emitted after an internal nextTick too — so the test could pass even if
the fix failed to prevent dismiss. Match the wait used in the dismiss test
to actually guard against that regression.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@zernonia zernonia merged commit ed7531b into unovue:v2 Jun 10, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@benjamincanac @zernonia