Skip to content

[textfield] Use non-native label for <TextField select/>#47958

Merged
mj12albert merged 9 commits intomui:masterfrom
mj12albert:fix/textfield-select-label
Mar 19, 2026
Merged

[textfield] Use non-native label for <TextField select/>#47958
mj12albert merged 9 commits intomui:masterfrom
mj12albert:fix/textfield-select-label

Conversation

@mj12albert
Copy link
Copy Markdown
Member

@mj12albert mj12albert commented Mar 12, 2026 •
edited
Loading

Breaking: The visible text label uses a div instead of a label element for <TextField select/>

Only applies when it's the <Select> component, not <NativeSelect>

Part of #47489

Preview: https://deploy-preview-47958--material-ui.netlify.app/material-ui/react-text-field/#select

Avoids devtool errors about incorrect use of the label element; it's not strictly needed as the component is named with aria-labelledby already.

@mj12albert mj12albert added type: bug It doesn't behave as expected. scope: text field Changes related to the text field. labels Mar 12, 2026
@mj12albert mj12albert changed the title Use non-native label for TextField.select [textfield] Use non-native label for <TextField select/> Mar 12, 2026
@mui-bot
Copy link
Copy Markdown

mui-bot commented Mar 12, 2026 •
edited
Loading

Netlify deploy preview

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+73B(+0.01%) 🔺+54B(+0.04%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against a74ab8d

@mj12albert mj12albert added breaking change Introduces changes that are not backward compatible. and removed type: bug It doesn't behave as expected. labels Mar 12, 2026
@mj12albert mj12albert force-pushed the fix/textfield-select-label branch from b7a4fad to dd591cf Compare March 12, 2026 15:13
@mj12albert mj12albert marked this pull request as ready for review March 12, 2026 15:14
siriwatknp
siriwatknp reviewed Mar 13, 2026
View reviewed changes
Comment thread packages/mui-material/src/Input/Input.js Outdated
@mj12albert mj12albert force-pushed the fix/textfield-select-label branch from 155b34f to afffdab Compare March 13, 2026 05:45
@mj12albert mj12albert requested a review from siriwatknp March 13, 2026 05:54
@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 13, 2026
@mj12albert mj12albert force-pushed the fix/textfield-select-label branch from 35af8d8 to 4028882 Compare March 13, 2026 11:44
@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 13, 2026
@mj12albert mj12albert force-pushed the fix/textfield-select-label branch 3 times, most recently from 49b1c2c to 96c18cc Compare March 13, 2026 13:22
@mj12albert mj12albert force-pushed the fix/textfield-select-label branch from 96c18cc to 70c9981 Compare March 13, 2026 14:38
ZeeshanTamboli
ZeeshanTamboli reviewed Mar 14, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the description it is mentioned:

Part of #47489

From the changes done, I see it completely fixes #47489, doesn't it?

Comment thread packages/mui-material/src/Input/Input.js Outdated
@mj12albert
Copy link
Copy Markdown
Member Author

mj12albert commented Mar 16, 2026

From the changes done, I see it completely fixes #47489, doesn't it?

Just to keep the issue open, the same error is all over the select page too since the demos compose InputLabel manually. We could consider a InputLabel nativeLabel={false} prop to make it easier to handle (non-breaking so no rush).

@ZeeshanTamboli
Copy link
Copy Markdown
Member

ZeeshanTamboli commented Mar 17, 2026

From the changes done, I see it completely fixes #47489, doesn't it?

Just to keep the issue open, the same error is all over the select page too since the demos compose InputLabel manually. We could consider a InputLabel nativeLabel={false} prop to make it easier to handle (non-breaking so no rush).

Or let the user handle it with <InputLabel component="div" />?

@mj12albert
Copy link
Copy Markdown
Member Author

mj12albert commented Mar 18, 2026

Or let the user handle it with <InputLabel component="div" />?

htmlFor={undefined} is also needed at the same time, I think providing a prop would be better DX-wise

ZeeshanTamboli
ZeeshanTamboli approved these changes Mar 19, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could consider a InputLabel nativeLabel={false} prop to make it easier to handle (non-breaking so no rush).

It can be handled in a separate PR, right? Approving this PR.

Comment thread docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md Outdated
@mj12albert mj12albert enabled auto-merge (squash) March 19, 2026 07:22
@mj12albert mj12albert merged commit f34c7d1 into mui:master Mar 19, 2026
23 checks passed
@mj12albert mj12albert deleted the fix/textfield-select-label branch March 19, 2026 08:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@siriwatknp siriwatknp siriwatknp approved these changes

@ZeeshanTamboli ZeeshanTamboli ZeeshanTamboli approved these changes

@silviuaavram silviuaavram Awaiting requested review from silviuaavram

Assignees

No one assigned

Labels

breaking change Introduces changes that are not backward compatible. scope: text field Changes related to the text field.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@mj12albert @mui-bot @ZeeshanTamboli @siriwatknp