TextField inputProps not passed to <input/>

[kylegoetz]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Edit Title fully captures problem. MRE is below.

Expected Behavior 🤔

According to the API documentation for TextField, inputProps should be passed down to the <input/> element. However, this does not happen, as you can see in my MRE below.

The HTML that gets output is:

<div class="MuiFormControl-root MuiTextField-root">
    <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl">
        <div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-label="should be on INPUT element">
            One
        </div>
        <input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" value="1">
        <svg class="MuiSvgIcon-root MuiSelect-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"></path></svg>
    </div>
</div>

You can see the aria-label I pass in via <TextField inputProps={{'aria-label':.... is being attached to the <div/> rather than the <input/>, which conflicts with the documentation.

I've also tried InputProps and SelectProps={{ inputProps: { 'aria-label': ... just to be certain. I tried tracing through the code, but I can't find the logic that decides to assign to the DIV instead of INPUT.

Steps to Reproduce 🕹

Minimal reproducible example:

https://github.com/kylegoetz/material-ui-bug

Steps:

1. clone repo
2. npm i
3. npm start
4. localhost:3000 in browser
5. examine HTML

Context 🔦

I'm trying to unit test my components, which use Material UI form components. I'm using @testing-library/react, which advocates for accessibility-based testing, so you would expect(getByLabelText('my aria label')).toHaveValue(expected) but when you getByLabelText on this, you get the DIV, which has no value property.

There are other solutions, but they closely couple the test to my implementation or otherwise fall short of accessibility-based testing, and if I switched from @material-ui, it would break all the closely-coupled tests (as it stands, switching from NativeSelect to TextField already breaks the tests because inputProps aren't being passed as per the documentation.

Your Environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 11.5.2
  Binaries:
    Node: 16.10.0 - /opt/homebrew/bin/node
    Yarn: 1.22.15 - /opt/homebrew/bin/yarn
    npm: 7.24.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.2
  npmPackages:
    @types/react:  17.0.34
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2

Browser is latest Chrome