[Autocomplete] Impossible to set aria-label on html input of TextField

[KingWarin]

Steps to reproduce

Link to live example: Codesandbox

Steps:

1. Add a TextField as renderInput on an Autocomplete with aria-label and without a real label (see examples provided in codesandbox)

Current behavior

When aria-label is set:

1. on the TextField component (<TextField aria-label="foo" />), it's on MuiFormControl-Root, not the <input>.
2. in InputProps of TextField component (<TextField {...params} InputProps={{ "aria-label": "foo" }} />), its on MuiInputBase-Root, not the <input>.
3. in inputProps of TextField component (<TextField {...params} inputProps={{ "aria-label": "foo" }} />), it is correctly set on the <input> but the whole component breaks and produces an error when it is focused

Expected behavior

One of all the possible combinations should yield a functioning Autocomplete with the given aria-label set to the <input>

Context

I'm creating a form where there is some text explaining what the Autocomplete is used for that is too long to be set as label directly.
Would be glad to give this element an ID and use it on aria-labelledby, but this is also impossible to set without breaking the component.
Setting a shorter label on the field while having the text before would be redundant and unnecessary.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.141
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base: ^5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.15 
    @mui/icons-material: ^5.14.16 => 5.15.5 
    @mui/lab: ^5.0.0-alpha.152 => 5.0.0-alpha.161 
    @mui/material: ^5.14.18 => 5.15.15 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system: ^5.15.14 => 5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-date-pickers: ^6.18.0 => 6.19.9 
    @types/react: ^18.2.43 => 18.2.48 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.3.3 => 5.3.3 

Search keywords: accessibility aria-label TextField Autocomplete

[oliviertassinari]

This looks like a duplicate of another support question we had on the autocomplete.

[mj12albert]

in inputProps of TextField component (<TextField {...params} inputProps={{ "aria-label": "foo" }} />)

@KingWarin This should work! Here's a demo: https://stackblitz.com/edit/mcve-react-material-ui-npgl9s?file=src%2FApp.tsx

// https://github.com/mui/material-ui/issues/42627
import * as React from 'react';
import { Autocomplete, TextField } from '@mui/material';

export default function Playground() {
  return (
    <Autocomplete
      disablePortal
      options={OPTIONS}
      sx={{ width: 300 }}
      renderInput={(params) => (
        <TextField
          {...params}
          inputProps={{
            ...params.inputProps,
            'aria-label': 'foo',
          }}
        />
      )}
    />
  );
}

const OPTIONS = [
  { label: 'Forrest Gump', year: 1994 },
  { label: 'Inception', year: 2010 },
  {
    label: 'The Lord of the Rings: The Two Towers',
    year: 2002,
  },
];

it is correctly set on the but the whole component breaks and produces an error when it is focused

I can't reproduce this, see the demo above!
By the way, I also noticed that in some places in your sandbox inputProps is incorrectly nested inside InputProps:

 <Autocomplete
    renderInput={(params) => (
        <TextField
            {...params}
            InputProps={{
              inputProps: {
                ...params.inputProps,
                "aria-label": "foo",
              },
            }}
          />
        )}
      />

[KingWarin]

@mj12albert the nesting of inputProps inside InputProps was me trying all possible combinations I (with the help of intellisense) could think of...

Just took a look at your demo. In trying to find a valid combination I didn't add the ...params.inputProps inside the inputProps (as seen in the commented component of my codesandbox) which in led to having the aria-label on the resulting input, but everything else breaking, as the default functions where missing.
So you're absolutely right and after adding the spread it works.

Thank you very much for the reply.