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

                        <Autoplete

                            id="bo-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  />
                            )}
                        />

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

                        <Autoplete

                            id="bo-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  />
                            )}
                        />

• javascript
• reactjs
• material-ui

• try adding attribute autoplete="off"to TextField – tanmay Commented Nov 18, 2019 at 14:39
• 1 that doesn't work – Gim-Cojocaru Raul-Cristian Commented Nov 18, 2019 at 14:42

2 Answers 2

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:

<Autoplete
    id="bo-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
          />
        );
      }
    }
/>

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'

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