CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Gim-Cojocaru Raul-Cristian
Gim-Cojocaru Raul-Cristian

Reputation: 659

Material-UI Autocomplete & TextField triggers google autocomplete

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

Upvotes: 7

Views: 8759

Answers (2)

EugenSunic
EugenSunic

Reputation: 13703

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

Upvotes: 4

Ryan Cogswell
Ryan Cogswell

Reputation: 81066

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

Upvotes: 11

Related Questions