[material-ui][TextField] Props passed in `inputProps` are not attached when `slotProps.htmlInput` is passed

[sai6855]

Steps to reproduce

Link to live example: (required) https://stackblitz.com/edit/react-osybga?file=Demo.tsx

Steps:

1. className is passed in inputProps and id is passed through slotProps.htmlInput
2. On inspecting you can notice, className passed in inputProps didn't get attached and only id got attached
3. Since inputProps is deprecated not removed, as a user i would expect old behavior would work as is, irrespective of whether slotProps is passed or not.

FYI: This PR actually solved this issue, we can consider merging it if we think this issue is a bug.

How to test changes changes are working in #43606

1. open https://deploy-preview-43606--material-ui.netlify.app/material-ui/react-text-field/#basic-textfield demo
2. paste code from above live example (I'm not able to create a sandbox from PR)
3. Notice in html that both className and id got attached to input

Current behavior

props passed in inputProps not getting attached if slotProps.htmlInput is passed

Expected behavior

props passed in inputProps should get attched

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: TextField

[siriwatknp]

I'd say that this is expected in v6. The inputProps is deprecated in favor of slotProps.htmlInput.

@sai6855 I think we missed the documentation about it, what do you think? cc @DiegoAndai

Note: merging props could be overcomplicated (the slotProps.* supports function). Might be better to teach users to migrate to slotProps.*.

[siriwatknp]

For #43606, I think lets add a document or a demo that shows which props to passed to TextField's slotProps:

<Autocomplete
  options={top100Films}
  renderInput={(params) => (
    <TextField
      {...params}
      slotProps={{
        input: {
          className: 'custom-input-wrapper',
          …params.InputProps,
        },
        htmlInput: {
          id: 'my-id',
          …params.inputProps,
        },
      }}
    />
  )}
/>

[DiegoAndai]

I agree with @siriwatknp; slotProps.htmlInput and inputProps should not be merged, and slotProps.htmlInput (and any slots or slotProps value) should override the deprecated APIs (inputProps in this case).

About #43606, we should update Autocomplete to use slotProps instead of inputProps and InputProps. We should also document how to use it as @siriwatknp suggested, but with the updated APIs:

<Autocomplete
  options={top100Films}
  renderInput={(params) => (
    <TextField
      {...params}
      slotProps={{
        input: {
          className: 'custom-input-wrapper',
          …params.slotProps.input,
        },
        htmlInput: {
          id: 'my-id',
          …params.slotProps.htmlInput,
        },
      }}
    />
  )}
/>

I'm closing this one and following up on #43606.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.