Google Chrome forces autofill on fields set autocomplete="off"

[NickColley]

We are struggling to disable chrome's autocomplete when using this. We can set autocomplete: "new-password" on the input, but not on the new input in the autocomplete__wrapper. You can see chromes autofill interfering and the relevant autocomplete label in this screencast.

From researching it this morning it seems to be that Chrome is ignoring autocomplete "off" and instead you need to use "new-password".

Chrome intentionally ignores autocomplete="off" and autocomplete="false". However, they put new-password in as a special clause to stop new password forms from being auto-filled.

from https://stackoverflow.com/questions/10938891/disable-form-autofill-in-chrome-without-disabling-autocomplete

[NickColley]

This Chromium bug seems relevant: https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

[dashouse]

Stolen from @igloosi's Twitter

[NickColley]

I have added our case to the bug thread: https://bugs.chromium.org/p/chromium/issues/detail?id=914451#c53

[nogginbox]

@nickcolley I've been struggling with this bug in Chrome for a long time. The chrome team do not seem to be paying attension to the bug report and seem to actively find new ways to force autocomplete, when you think you've found a work around.

[zaidsheriff786]

Here's a workaround to fix this problem renderInput={(params) => { const inputProps = params.inputProps inputProps.autoComplete = 'chrome-off' return ( <TextField {...params} inputProps={inputProps} label="Country" size="small" variant="outlined" /> ) }}

[alexey-sh]

any progress with workaround?

[NickColley]

I've heard reports that setting the "autocomplete" attribute to a value that's not recognised may help, which could explain why using "chrome-off" might work. Something for the GDS team to investigate if they have time.

[Spencerooni]

A workaround might be not to name the input something which chrome is looking for to guess what the input is for. Not suggesting to do this everywhere, but if you had one important example like your gif, it might be a way around it.

Regexes look to be here: https://source.chromium.org/chromium/chromium/src/+/master:components/autofill/core/browser/autofill_regex_constants.cc;l=9?q=autofill_regex&ss=chromium%2Fchromium%2Fsrc

[edwardhorsford]

We have a temporary solution using client side js - rename the name attribute on the client to something random, then restore it on submit. Seems to work so far.

[vanitabarrett]

We're not sure if this is something we can fix as Chrome seem fairly adamant on keeping this behaviour. However, we should do an investigation to see if there's anything we can do as it's easy to see how this can cause issues for users. If we're unable to fix this, we could consider adding something to the guidance about this.

[edwardhorsford]

@vanitabarrett this is absolutely fixable with js - my team (as above) has a working solution. It does introduce a non standard attribute, but I think the benefits greatly outway the downside.

I'm currently working on a PR on my service to clean up the code.

[dlzhry2nhs]

We also ran into this issue on our project. Setting autocomplete=”chrome-off” was the most promising for us. However, there is a limitation in that it will work for a maximum of 5 input fields; any more than that and Chrome will ignore it for the subsequent input fields.

We had a brief Slack thread on this yesterday and this was probably the best article - both in summarising the limitations of several workarounds and proposing their own JS fix. They are removing the autcomplete attribute onBlur and setting the attribute onFocus.