[SOLVED] How to override autocomplete/autofill in Material UI autocomplete

How to override autocomplete/autofill in Material UI autocomplete - React JS

I am using Material UI autocomplete ( https://mui.com/components/autocomplete/#free-solo ).

It's working fine, demo is here : https://codesandbox.io/s/0v9v9?file=/demo.tsx

by default Text input is showing autoComplete='off' but i want to change it to autoComplete='new-something' but it's not working and autoComplete='new-something' is showing as parent dev attribute instead of Input

I used this code

<TextField
  {...params}
  inputProps={{
    ...params.inputProps,
    autoComplete: 'new-something',
  }}
/>

But it's not working. In input it's still showing autocomplete="off" as input attribute.

Solution

As you can see in the doc https://mui.com/api/text-field/#props there is two props with the same name

inputProps: Attributes applied to the input element.
InputProps: Props applied to the Input element.

For autocomplete attribute you need inputProps

   <TextField
      {...params}
      label="Search input"
      InputProps={
        ...params.InputProps,
        type: 'search',
      }}
      inputProps={{
        autocomplete: 'something'
      }}
    />

Here a working exanple in the codesanbox https://codesandbox.io/s/freesolo-material-demo-forked-8g2n1?file=/demo.tsx