[material-ui][Select] Select not propagating readonly attribute to input

[Yuwan]

Steps to reproduce

Link to live example: (required)
https://stackblitz.com/edit/react-n9koip-itsgyz?file=index.html,Demo.tsx

Steps:

1. create a TextField and a SelectTextField and set the attribute to readOnly
2. add the css with input[readonly] = { color: 'lightgray' }
3. TextField works well with the correct color
4. SelectTextField without dropdown list as expected but the css style didn't work.

Current behavior

Ref SelectInput
https://github.com/mui/material-ui/blob/dc922eeec5c1870affd9dfa3c6a351786a2ba451/packages/mui-material/src/Select/SelectInput.js

• SelectTextField without dropdown list as the logic on line 506
  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)

<SelectNativeInput
        aria-invalid={error}
        value={Array.isArray(value) ? value.join(',') : value}
        name={name}
        ref={inputRef}
        aria-hidden
        onChange={handleChange}
        tabIndex={-1}
        disabled={disabled}
        className={classes.nativeInput}
        autoFocus={autoFocus}
        ownerState={ownerState}
        {...other}
      />

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:

[ZeeshanTamboli]

I confirm it's a bug. The readOnly attribute is not passed to the hidden input. Would you like to create a PR? We would also need to add a test.

[aarongarciah]

Note that even when we fix the issue and readOnly is propagated to the underlying input element, applying styles such as input[readonly] { color: lightgray } won't work because in the case of Select the input is visually hidden.

Also, although we support readOnly in Select, native select elements don't support readonly attributes (see HTML spec). It has no effect and even HTML validators will point it as an error. For example, readOnly in NativeSelect (which renders a plain select) end up in the DOM but has no effect.

---

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.