[material-ui][TextField] id in InputProps in TextField is reflected in its HTML input, not parent div.

[hiro712]

Steps to reproduce

<TextField
  fullWidth
  variant='standard'
  color={category2color(studentTextbook.category) as ThemeColor}
  value={completedPage}
  onChange={e => setCompletedPage(str2num(e.target.value))}
  onFocus={() => setDraggable(false)}
  onBlur={() => {
    updateTextbook()
    setDraggable(true)
  }}
  InputProps={{ inputMode: 'numeric', id: "test-test-test" }}
>

The above description results in the following DOM, which shows that the inputmode is in the div, not the input. The id described for debugging purposes is in input.

<div inputmode="numeric" class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorSuccess MuiInputBase-fullWidth MuiInputBase-formControl mui-cygx73-MuiInputBase-root-MuiInput-root">
<input aria-invalid="false" id="testtesttest" class="MuiInputBase-input MuiInput-input mui-kgwhob-MuiInputBase-input-MuiInput-input" type="text" value="30">
</div>

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

System:
OS: macOS 14.5
Binaries:
Node: 18.18.2 - ~/.asdf/installs/nodejs/18.18.2/bin/node
npm: 9.8.1 - ~/.asdf/plugins/nodejs/shims/npm
pnpm: Not Found
Browsers:
Chrome: 126.0.6478.127
Edge: Not Found
Safari: 17.5
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.21
@mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170
@mui/material: ^5.15.16 => 5.15.21
@mui/material-nextjs: ^5.15.11 => 5.15.11
@mui/private-theming: 5.15.20
@mui/styled-engine: 5.15.14
@mui/system: ^5.4.1 => 5.15.20
@mui/types: 7.2.14
@mui/utils: 5.15.20
@mui/x-data-grid: ^6.20.0 => 6.20.3
@types/react: ^18.3.3 => 18.3.3
react: ^18 => 18.3.1
react-dom: ^18 => 18.3.1
typescript: ^5.4.5 => 5.5.3

Search keywords: inputMode

[ZeeshanTamboli]

@hiro712 InputProps is for the root div, and inputProps is for the HTML input element.

For your use case, set the inputMode attribute in inputProps for the HTML input, not in InputProps. However, there's a bug with the id attribute where it should apply to the root div when passed in InputProps.

To make it less confusing, in v6 we introduced slots: use slotProps.input for the root div and slotProps.htmlInput for the HTML input.

[hiro712]

I used inputProps instead of InputProps and my problem was solved. Thank you very much.

[DiegoAndai]

Thanks for attending this issue @ZeeshanTamboli

For your use case, set the inputMode attribute in inputProps for the HTML input, not in InputProps. However, there's a bug with the id attribute where it should apply to the root div when passed in InputProps.

Do you know if this is also present when using slotProps.input?

[ZeeshanTamboli]

Do you know if this is also present when using slotProps.input?

Yes, it does. See this example: CodeSandbox.

I attempted to fix it in PR #43084. However, the issue also involves the id explicitly passed through the Input component (<Input id={id} />). In this case, the id is intended for the HTML input element, not the root div in InputBase.

Example: https://github.com/mui/material-ui/blob/next/docs/data/material/customization/color/ColorTool.js#L223-L224, which is what the e2e-website CI detected in #43084.

[DiegoAndai]

Thanks for the reply @ZeeshanTamboli. As you mention:

However, the issue also involves the id explicitly passed through the Input component ().

Because the InputBase component forwards id to the HTML input, we end up with this behavior.

The TextField's slotProps.input is working as intended: forwarding the id prop to InputBase, but I agree this is confusing and should be reviewed. I'll add the slots label as we'll discuss the slots API soon.