Chrome Autofill overwrites values on controlled components

[epicfaace]

Do you want to request a feature or report a bug?
Report a bug. Initially reported in rjsf-team/react-jsonschema-form#1153

What is the current behavior?
Autofill overwrites existing values in fields when those fields are controlled components in React.

See https://jsfiddle.net/epicfaace/9p17e2qx/21/ -- to test this, add a "Saved Address" in the Chrome options.

What is the expected behavior?
Autofill does not overwrite existing fields. I've made a JSFiddle with a plain HTML form, which works with the expected behavior.

See https://jsfiddle.net/epicfaace/1my3f9n4/6/

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 15.3.2
Chrome 71.0.3578.98

[mabeabe28]

Seems to be caused if the "value" prop (e.g which chrome seems to see as a default value/placeholder for the field) is equal to the inserted value of the field. So when react updated the value prop on state change, we are technically changing the default value/placeholder to match whatever we type in. So chrome then sees this as an untouched field, and will overwrite on auto fill

For example. Type a string in the first name field...react will update the value prop to whatever you've typed. Try the email Autofill and it will overwrite the first name field.

However, type in a string in the first name field, then inspect element and edit the firstname value prop to a string other than the one you've typed in, and try email autofill again...this time it will not overwrite...since the value is not the same as the "default" value.

Another way around it is onChange, update autocomplete=this.state.value. And chrome will recognise not to autocomplete this field for some reason. (autocomplete=off doesn't work...it has to be any random string) If empty and this.state.value is empty, then autofill will still work on the field as expected.

[epicfaace]

^^ That's right. Here's a working example using the onChange suggestion: https://jsfiddle.net/epicfaace/9p17e2qx/29/

[nhunzaker]

Very interesting! This is a side-effect of synchronizing the value attribute/property on inputs that I wasn't aware of before (thanks, @mabeabe28):

If the value attribute is the same as the value property, Chrome assumes the input is "untouched", and will replace the value property during an autofill action

I wonder if this is true in other browsers.

I feel like we must have a bug tracking autofill issues, but I am not sure if any of them document this. I also made a gist that compares the native and React approach:

https://codesandbox.io/s/01zr8pll00

[beheh]

If the value attribute is the same as the value property, Chrome assumes the input is "untouched", and will replace the value property during an autofill action

This might be at least partially resolved by #13525 ("Stop reflecting input values in the value attribute").