[Joy][TextField] Invalid componentProps mapping

[zignis]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Correct me if I am wrong, is it the expected behaviour that when trying to set the maxlength attribute on the textfield using componentProps prop, the attribute gets passed to root element instead of the input slot?

<TextField
  componentProps={{
    input: {
      maxLength: 128,
    },
  }}
/>

This renders to:

<div maxlength="128" class="JoyInput-root ...">
  <input type="text" class="JoyInput-input ..." >
</div>

Notice how the maxlength attribute is passed to the root element instead of the native input element.

Workaround

...
    <Textfield
      componentsProps={{
        input: {
          componentsProps: {
            input: {
              maxLength: 128,
            },
          },
        },
      }}
    />
...

Expected behavior 🤔

Input component props should get passed to the native input element. Adding inputProps prop to the TextField component might help with this.

Steps to reproduce 🕹

CodeSandbox: https://codesandbox.io/s/nervous-water-k0ktu4?file=/src/App.tsx

Context 🔦

Trying to set native input element attributes on the TextField component.

Your environment 🌎

npx @mui/envinfo

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

[zignis]

Similar #34176