fix(select): use Select.Label + Field hideLabel to fix hover coupling#502
fix(select): use Select.Label + Field hideLabel to fix hover coupling#502mattrothenberg merged 3 commits intomainfrom
Conversation
Native <label> elements couple hover/focus to their associated control, causing the Select trigger to change appearance when hovering the label text. Fix by: 1. Adding hideLabel prop to Field — renders layout, description, and error but skips the <label> element 2. Rendering Base UI Select.Label inside SelectBase.Root for accessible naming without hover coupling 3. Passing hideLabel to Field so description/error stay in Field where they belong (no inlined Field logic) This is an alternative to #500 that avoids duplicating Field internals.
commit: |
Docs PreviewCommit: |
Visual Regression Report — 5 changed, 11 unchanged5 screenshot(s) with visual changes: Select / Select Sizes170 px (0.09%) changed
Select / Select With Field635 px (0.54%) changed
Select / Select Loading0 px (0%) changed
Select / Select Long List1,346 px (1.14%) changed
Select (Open)252 px (0%) changed
11 screenshot(s) unchanged
Generated by Kumo Visual Regression |
|
/bonk approve |
![ask-bonk[bot]](https://avatars.githubusercontent.com/in/2454580?s=60&v=4){kind=small}
There was a problem hiding this comment.
bonk approves - Clean, minimal fix that avoids code duplication while solving the hover/focus coupling issue. The hideLabel prop is a nice general-purpose addition to Field that other components can use when they need to provide their own accessible labels. Using Base UI's Select.Label with hideLabel is much cleaner than inlining Field's logic into Select. Visual diff changes are expected since the label structure changed (native label to Base UI's Select.Label).
|
✅ Approved PR #502 Clean, minimal fix that solves the hover/focus coupling bug without duplicating code. The |
The label text lost its styles (text-base font-medium text-kumo-default) when we moved from Field rendering the label to SelectBase.Label with className="contents". Apply the styles directly to SelectBase.Label.
1 participant
Summary
Alternative approach to #500 for fixing the Select label hover/focus coupling bug.
Instead of inlining Field's description/error logic into Select (~50 lines of duplicated wiring), this PR:
Adds
hideLabelprop to Field — renders layout, description, and error but skips the native<label>element. This is a general-purpose escape hatch for any component that provides its own accessible label.Renders
Select.LabelinsideSelectBase.Root— Base UI handles accessible naming via context, no manualaria-labelledbywiring needed.Passes
hideLabelto Field — description/error/layout stay in Field where they belong.Reviews
bonk has reviewed the change
automated review not possible because: needs visual review of hover behavior
Tests
Additional testing not necessary because: no API changes, existing tests pass