Material-UI Autocomplete & TextField triggers google autocomplete

Question

I am trying to implement the Autocomplete component into my project but am getting the autofill/autocomplete from the browser after some time. Do you know how I can set it to off ?

                        <Autocomplete

                            id="combo-box-demo"
                            options={battleRepos}
                            getOptionLabel={option => option.full_name}
                            style={{ width: 500 }}
                            renderInput={params => (
                                <TextField {...params} 
                                    label="Combo box"  
                                    variant="outlined"
                                    onBlur={event => console.log(event.target.value)}

                                    fullWidth  />
                            )}
                        />

Answer 1

UPDATE

With the release of @material-ui/core 4.7.0 and @material-ui/lab 4.0.0-alpha.33, this is now fixed and no longer requires the workaround shown below.

---

This has been fixed in a recent pull request, but is not yet released (will be in the next release).

If you want to work around this prior to it being released (which will likely be within a few days), you can set inputProps.autoComplete = "off" like in the following:

<Autocomplete
    id="combo-box-demo"
    options={battleRepos}
    getOptionLabel={option => option.full_name}
    style={{ width: 500 }}
    renderInput={params => {
        const inputProps = params.inputProps;
        inputProps.autoComplete = "off";
        return (
          <TextField
            {...params}
            inputProps={inputProps}
            label="Combo box"  
            variant="outlined"
            onBlur={event => console.log(event.target.value)}
            fullWidth
          />
        );
      }
    }
/>

Answer 2

Even with the latest:

 "@material-ui/core" 
 "@material-ui/lab"

which contains the autoComplete property set to 'off', I wasn't able to get the autofill box go away.

Also tried setting the attribute on the form tag <form autoComplete="off">...</form>

To no avail.

The thing which resolved the issue was setting the autoComplete field to 'new-password'

<Autocomplete
    id='id'
    options={data}
    onChange={(e, val) => input.onChange(val)}
    renderInput={(params) => {
        params.inputProps.autoComplete = 'new-password';
        return <TextField {...params}
            label={label} placeholder="Type to Search" />
    }} 
/>