-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
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.
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
[material-ui][Select] Select not propagating readonly
attribute to input
#42256
Comments
I confirm it's a bug. The |
readonly
attribute to input
readonly
attribute to inputreadonly
attribute to input
Note that even when we fix the issue and Also, although we support Side note: we're not doing a good job of signaling states to assistive tech. When focusing the inputs in this demo https://mui.com/material-ui/react-select/#other-props the error, read-only, and required "states" are not announced. |
Important context: the I've been digging deeper into this problem and it's more complex than it seems. I've created these two demos to showcase the issues.
You can see the differences between when the To get the
Conclusions:
cc @DiegoAndai |
I agree with your analysis @aarongarciah 👌🏼 as well as with closing the PR I'm adding this issue to the Base UI milestone so we can revisit it when the Select component is refactored on top of Base UI. When that happens, we can revisit the following:
|
Steps to reproduce
Link to live example: (required)
https://stackblitz.com/edit/react-n9koip-itsgyz?file=index.html,Demo.tsx
Steps:
Current behavior
Ref SelectInput
https://github.com/mui/material-ui/blob/dc922eeec5c1870affd9dfa3c6a351786a2ba451/packages/mui-material/src/Select/SelectInput.js
onMouseDown={disabled || readOnly ? null : handleMouseDown}
but the Input element without "readonly" attribute
(please check the imaged below, you cannot find readonly from input element of selectTextfield)
so in live demo page, the dropdown list didn't show color:lightgray
Expected behavior
the behavior should be aligned with the attribute "disabled" or the "readonly" attribute in TextField
Ref SelectInput
https://github.com/mui/material-ui/blob/dc922eeec5c1870affd9dfa3c6a351786a2ba451/packages/mui-material/src/Select/SelectInput.js (line.523-536)
I expected there to be an attribute "readonly={readonly}" like disabled={disabled}, so the readonly can apply to the Input element in the end.
Context
Your environment
Browsers:
Chrome: 124.0.6367.201
Search keywords: TextField
Search keywords:
The text was updated successfully, but these errors were encountered: