Chrome may override disabled autoComplete in TextFields

[marina101]

Issue summary

Chrome is known to sometimes ignore the autoComplete=false setting on inputs: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

The workaround is to set it to a string field named differently from the ones autocomplete looks for:
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

Expected behavior

TextField should be able to handle a string prop as well as a boolean prop for autocomplete, and then set autocomplete to the value of the string if the prop is a string.

Actual behavior

TextField only accepts boolean or null values.

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 3.10.0
• Browser: Chrome Version 72.0.3626.121 (Official Build) (64-bit)
• Device: mac
• Operating System: Mojave 10.14.3

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[marina101]

After discussion, it seems that new browsers might only be respecting it if it set to false:
#708
#761

[marina101]

I'm re-opening this. We're getting multiple shops for whom chrome is ignoring the autocomplete=off setting. I was able to reproduce this behavior in production using chrome 72, and when I changed the value of autocomplete to a string we got the correct behavior. I'd like to add the option of passing in a string argument instead of a boolean to TextField.

Longer term this may be related to https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill where chrome treats autocomplete and autofill differently and we might need to add support for autofill explicitly, but in the short term, passing in a string for autocomplete can fix this situation for us.

[ctrlaltdylan]

Realizing my issue (#4252) is redundant to this one.

It's not possible to set autocomplete=false via CSS which would be a nice workaround. Any other advice on this? Could we perhaps access the underlying element somehow?