[select] Incorrect use of <label for=FORM_ELEMENT>

[Federico-Zorzi]

Steps to reproduce

Steps:

1. Open this link to live example: https://mui.com/material-ui/react-text-field/#select
2. Open the codeSandbox section
3. Open the console and check the error message: "Incorrect use of "

Current behavior

Duplicate of issue: #38869

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Incorrect use of

[mj12albert]

We need to set an id on the hidden input and point the label's for to that instead of the div role="combobox" that's receiving the external id prop

[ZeeshanTamboli]

@mj12albert Seeing the discussion and comments in #38869, I think we can treat this as DevTools being overly strict about "autofill-style" label wiring. I think it is false-positive for us for non-native Select.

We can set the id on the hidden input but it would not be a good idea. The hidden input is aria-hidden="true" and tabindex="-1" which means it is not an interactive element. It also means clicking the label will focus/click a non-focusable, aria-hidden element.
Accessibility wise, we are doing it correct with aria-labelledby on div combobox and label element has that associated id which will work for screen readers.

If the developers want to really remove the error, they can the supply the props shown in #38869 (comment) cc @Federico-Zorzi

[hrishikesh2810]

Hi maintainers 👋
I’d like to work on this issue.
Please let me know if it’s already assigned to someone.
Thanks!

[silviuaavram]

Should we do anything about it? Or close it with a workaround?

[mj12albert]

Should we do anything about it? Or close it with a workaround?

@silviuaavram I think for Select, we could do both:

• always use <InputLabel component="div"> without a for attribute and rely on aria-labelledby to avoid the error on the label element
• always generate an id with useId for the hidden input to silence the error on the input element
  what do you think?