Ad

Material-UI Autocomplete & TextField Triggers Google Autocomplete

- 1 answer

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  />
                            )}
                        />

Image with the problem

Ad

Answer

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
          />
        );
      }
    }
/>

Ad
source: stackoverflow.com
Ad