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.