[Autocomplete] Better handle native browsers' autofill and autocomplete

[IanSmith89]

• I have followed (at least) the PR section of the contributing guide.

I checked the open issues and didn't see anyone else report what I was seeing (the browser autocomplete suggestion was overlaying the Autocomplete options popup). I updated autoComplete to the correct attribute value of "off" in getInputProps that was originally assigned "disabled."

Not sure if a one-liner makes sense for a PR but figured I'd share. Thanks for all the great work on Material UI. I'm a big fan and daily user.

[mui-pr-bot]

Details of bundle changes.

Comparing: 64ae0c6...c991e8f

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/lab	▼ -5 B (-0.00% )	171 kB	▲ +2 B (0.00% )	51.6 kB
Autocomplete	▼ -5 B (-0.00% )	126 kB	▲ +1 B (0.00% )	39.9 kB
useAutocomplete	▼ -5 B (-0.04% )	12.1 kB	▲ +1 B (+0.02% )	4.48 kB
@material-ui/core	--	351 kB	--	95.9 kB
@material-ui/core[umd]	--	310 kB	--	89.2 kB
@material-ui/styles	--	50.8 kB	--	15.4 kB
@material-ui/system	--	14.8 kB	--	4.06 kB
AppBar	--	62.3 kB	--	19.5 kB
Avatar	--	61.3 kB	--	19.3 kB
Backdrop	--	66.3 kB	--	20.4 kB
Badge	--	63.9 kB	--	19.8 kB
BottomNavigation	--	60.9 kB	--	19.1 kB
BottomNavigationAction	--	74 kB	--	23.4 kB
Box	--	69.3 kB	--	21 kB
Breadcrumbs	--	66.5 kB	--	20.9 kB
Button	--	77.9 kB	--	23.8 kB
ButtonBase	--	72.5 kB	--	22.7 kB
ButtonGroup	--	80.5 kB	--	24.7 kB
Card	--	61.3 kB	--	19.2 kB
CardActionArea	--	73.5 kB	--	23.2 kB
CardActions	--	60.6 kB	--	19 kB
CardContent	--	60.5 kB	--	18.9 kB
CardHeader	--	63.6 kB	--	20 kB
CardMedia	--	60.9 kB	--	19.1 kB
Checkbox	--	80.3 kB	--	25.2 kB
Chip	--	81 kB	--	24.7 kB
CircularProgress	--	62.6 kB	--	19.7 kB
ClickAwayListener	--	3.87 kB	--	1.56 kB
Collapse	--	66.4 kB	--	20.5 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	61.7 kB	--	19.3 kB
CssBaseline	--	56.1 kB	--	17.5 kB
Dialog	--	81.1 kB	--	25.1 kB
DialogActions	--	60.6 kB	--	19 kB
DialogContent	--	60.8 kB	--	19 kB
DialogContentText	--	62.6 kB	--	19.6 kB
DialogTitle	--	62.8 kB	--	19.7 kB
Divider	--	61.1 kB	--	19.2 kB
docs.landing	--	55.8 kB	--	14.3 kB
docs.main	--	606 kB	--	193 kB
Drawer	--	82.8 kB	--	25.6 kB
ExpansionPanel	--	69.7 kB	--	21.7 kB
ExpansionPanelActions	--	60.6 kB	--	19 kB
ExpansionPanelDetails	--	60.5 kB	--	18.9 kB
ExpansionPanelSummary	--	76.6 kB	--	24.1 kB
Fab	--	75.3 kB	--	23.4 kB
Fade	--	22.1 kB	--	7.63 kB
FilledInput	--	72.1 kB	--	22.3 kB
FormControl	--	62.9 kB	--	19.5 kB
FormControlLabel	--	64 kB	--	20.1 kB
FormGroup	--	60.5 kB	--	18.9 kB
FormHelperText	--	61.8 kB	--	19.3 kB
FormLabel	--	62 kB	--	19.2 kB
Grid	--	63.6 kB	--	19.9 kB
GridList	--	61 kB	--	19.1 kB
GridListTile	--	62.3 kB	--	19.5 kB
GridListTileBar	--	61.8 kB	--	19.3 kB
Grow	--	22.7 kB	--	7.76 kB
Hidden	--	64.5 kB	--	20.2 kB
Icon	--	61.3 kB	--	19.2 kB
IconButton	--	74.6 kB	--	23.2 kB
Input	--	71 kB	--	22.1 kB
InputAdornment	--	63.6 kB	--	20 kB
InputBase	--	69.1 kB	--	21.6 kB
InputLabel	--	63.9 kB	--	19.9 kB
LinearProgress	--	63.9 kB	--	19.9 kB
Link	--	65.1 kB	--	20.6 kB
List	--	60.9 kB	--	18.9 kB
ListItem	--	75.6 kB	--	23.6 kB
ListItemAvatar	--	60.6 kB	--	19 kB
ListItemIcon	--	60.7 kB	--	19 kB
ListItemSecondaryAction	--	60.5 kB	--	18.9 kB
ListItemText	--	63.5 kB	--	20 kB
ListSubheader	--	61.3 kB	--	19.2 kB
Menu	--	86.7 kB	--	27.2 kB
MenuItem	--	76.6 kB	--	23.9 kB
MenuList	--	64.5 kB	--	20.1 kB
MobileStepper	--	66.3 kB	--	20.7 kB
Modal	--	14.2 kB	--	4.96 kB
NativeSelect	--	75.3 kB	--	23.7 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	72.6 kB	--	22.5 kB
Paper	--	60.8 kB	--	18.9 kB
Popover	--	81.1 kB	--	25 kB
Popper	--	28.5 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.3 kB
Radio	--	81.1 kB	--	25.5 kB
RadioGroup	--	61.8 kB	--	19.3 kB
Rating	--	68.5 kB	--	21.9 kB
RootRef	--	4.43 kB	--	1.67 kB
Select	--	113 kB	--	33.4 kB
Skeleton	--	61 kB	--	19.2 kB
Slide	--	24.2 kB	--	8.24 kB
Slider	--	74.1 kB	--	23.4 kB
Snackbar	--	75.7 kB	--	23.6 kB
SnackbarContent	--	64.2 kB	--	20.2 kB
SpeedDial	--	84.5 kB	--	26.6 kB
SpeedDialAction	--	115 kB	--	36.4 kB
SpeedDialIcon	--	63.1 kB	--	19.8 kB
Step	--	61.1 kB	--	19.2 kB
StepButton	--	80.8 kB	--	25.3 kB
StepConnector	--	61.3 kB	--	19.2 kB
StepContent	--	67.5 kB	--	21 kB
StepIcon	--	63.2 kB	--	19.6 kB
StepLabel	--	67.1 kB	--	21 kB
Stepper	--	63.3 kB	--	19.9 kB
styles/createMuiTheme	--	15.3 kB	--	5.4 kB
SvgIcon	--	61.6 kB	--	19.2 kB
SwipeableDrawer	--	90.2 kB	--	28 kB
Switch	--	79.6 kB	--	24.7 kB
Tab	--	74.8 kB	--	23.7 kB
Table	--	61.1 kB	--	19.1 kB
TableBody	--	60.6 kB	--	19 kB
TableCell	--	62.6 kB	--	19.6 kB
TableFooter	--	60.6 kB	--	19 kB
TableHead	--	60.6 kB	--	19 kB
TablePagination	--	139 kB	--	40.6 kB
TableRow	--	61.1 kB	--	19.1 kB
TableSortLabel	--	75.8 kB	--	24 kB
Tabs	--	83.9 kB	--	26.7 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	121 kB	--	35.5 kB
ToggleButton	--	74.6 kB	--	23.5 kB
ToggleButtonGroup	--	61.7 kB	--	19.4 kB
Toolbar	--	60.9 kB	--	19.1 kB
Tooltip	--	99 kB	--	31.3 kB
TreeItem	--	72.1 kB	--	22.7 kB
TreeView	--	64.9 kB	--	20.3 kB
Typography	--	62.2 kB	--	19.4 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	22.2 kB	--	7.64 kB

Generated by 🚫 dangerJS against c991e8f

[oliviertassinari]

disabled was used to disable the autocomplete and autofill feature of the browser. off wouldn't disable the autofill feature. This is not really documented, related to https://stackoverflow.com/questions/15738259/disabling-chrome-autofill.

[oliviertassinari]

the browser autocomplete suggestion was overlaying the Autocomplete options popup

I'm curious about this part. Do you have an example? For context, I could test it on Chrome macOS.

[IanSmith89]

Gotcha, good to know about "disabled" with autofill. I'll send over steps to reproduce shortly.

[porkopek]

I'm experiencing the same

Here is a condesandbox. It's the same as the first of the documentation (https://material-ui.com/components/autocomplete/#ComboBox.tsx) , but I added the attribute name="search" in the <Textfield> component

https://codesandbox.io/s/material-demo-386c6

The problem is that autocomplete="disabled" does not stop the autofill from provide suggestions.
And if I try to set the autocomplete property of the <Input> component, it totally ignores it, and sets disabled as the value

edit: I'm using Chrome Version 78.0.3904.97 (Official Build) (64-bit) in Windows 10

[IanSmith89]

The issue shows up for me in development with Storybook, and my Autocomplete component is as follows (similar to the docs). The browser suggestion goes away when I change the id to anything other than "test" or destructure the params being passed to renderInput and override the inputProps.autoComplete

const MyAutocomplete = ({ label, onChange, options, placeholder }) => (
    <Autocomplete
        disableOpenOnFocus
        filterSelectedOptions
        getOptionLabel={option => option.label}
        id="test"
        multiple
        onChange={onChange}
        options={options}
        renderInput={({ inputProps, ...params }) => {
            // removes browser suggestion
	    inputProps.autoComplete = 'off'

	    return (
	        <TextField
                    {...params}
		    fullWidth
		    inputProps={inputProps}
		    label={label}
		    placeholder={placeholder}
		    variant="outlined"
	        />
            )
        }}
    />
)

[IanSmith89]

Screenshot using macOS Mojave Chrome Version 78.0.3904.97 (Official Build) (64-bit)

[porkopek]

@IanSmith89 Thank you, with your solution of inputProps.autoComplete = 'off' I have been able to override the default disabled value, and now the suggestions don't pop up

[oliviertassinari]

Thank you for the codesandbox reproduction. The change seems to help.

However, if I remove the override for the country demo, and after these changes, my browser suggest autofill values, based on the saved addressed of my Google account.

[oliviertassinari]

It also fixes HTML5 validation errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-18376--material-ui.netlify.com%2Fcomponents%2Fautocomplete%2F

[oliviertassinari]

@IanSmith89 Thank you

[joshuascott]

Screenshot using macOS Mojave Chrome Version 78.0.3904.97 (Official Build) (64-bit)

@IanSmith89, I was super happy to find this, because I was experiencing this very issue and it was driving me CRAZY. However when copying your code, I get an error related to inputProps.autoComplete:

Property 'autoComplete' does not exist on type 'object'.ts(2339)

https://www.dropbox.com/s/ushry27nim6cr9f/Screenshot%202019-11-21%2013.35.58.png?dl=0

Could you point me in the right direction?

This StackOverflow post describes my problem:
https://stackoverflow.com/questions/58980631/material-ui-autocomplete-with-google-maps-disabling-secondary-chrome-browser-p

[porkopek]

@joshuascott You have to cast it to any.
The Typescript definition for inputProps is Object, which is not completely accurate. I don't know if the InputProps interface exists.

Try this
(params.inputProps as any).autoComplete = 'off';

[hutch120]

Not 100% sure if this is relevant here, but I tried a lot of stuff to turn off autocomplete for TextFields, and in the end what worked for me was wrapping it in a form element like this:

<form className={classes.root} noValidate autoComplete="off">
  <TextField ... />
</form>

[asktree]

I'm confused-- if we know Chrome ignores autocomplete="off" in inputs, why are we using that instead of some workaround? I had to manually set autocomplete to a random string in order to prevent it.

[oliviertassinari]

@asktree See https://material-ui.com/components/autocomplete/#autocomplete-autofill