Skip to content

[field] Forward controlId from FieldRoot #2158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

[field] Forward controlId from FieldRoot #2158

wants to merge 5 commits into from
+74 −26

Conversation

mj12albert
Copy link
Member

@mj12albert mj12albert commented Jun 24, 2025 •
edited
Loading

Fixes #2154 (comment)

Links the labels to ids sooner to avoid browser errors, currently in Chrome there are blue warnings on the labels of Input, Select and NumberField as well

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Jun 24, 2025 •
edited
Loading

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@2158

commit: ba9b318

@mui-bot
Copy link

mui-bot commented Jun 24, 2025 •
edited
Loading

Bundle size report

Bundle Parsed Size Gzip Size
@base-ui-components/react 🔺+210B(+0.07%) 🔺+114B(+0.12%)

Details of bundle changes

Generated by 🚫 dangerJS against ba9b318

@netlify Netlify
Copy link

netlify bot commented Jun 24, 2025 •
edited
Loading

✅ Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit ba9b318
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/685bdeb417cab80008226a6a
😎 Deploy Preview https://deploy-preview-2158--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 25, 2025
@mj12albert mj12albert force-pushed the field/invert-control-id branch from 1557978 to 5400faf Compare June 25, 2025 05:30
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 25, 2025
@mj12albert mj12albert force-pushed the field/invert-control-id branch from 5400faf to 787e15e Compare June 25, 2025 10:19
@mj12albert mj12albert force-pushed the field/invert-control-id branch from 787e15e to ba9b318 Compare June 25, 2025 11:34
@mj12albert
Copy link
Member Author

Initializing controlId from Field breaks the implicitly linked controls like radio/switch/checkbox since the default id is rendered until it's unset on mount and causes the same red warning:
output

Deferring the label's htmlFor to a state causes blue warnings for explicitly linked controls (e.g. Input):

Screenshot 2025-06-25 at 8 32 18 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@atomiks atomiks Awaiting requested review from atomiks atomiks will be requested when the pull request is marked ready for review atomiks is a code owner

@colmtuite colmtuite Awaiting requested review from colmtuite colmtuite will be requested when the pull request is marked ready for review colmtuite is a code owner

@michaldudak michaldudak Awaiting requested review from michaldudak michaldudak will be requested when the pull request is marked ready for review michaldudak is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
component: field
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@mj12albert @mui-bot