React: Chrome Autofill overwrites values on controlled components
Do you want to request a feature or report a bug?
Report a bug. Initially reported in https://github.com/mozilla-services/react-jsonschema-form/issues/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
epicfaace
All 4 comments
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.
mabeabe28
on 24 Jan 2019
^^ That's right. Here's a working example using the onChange suggestion: https://jsfiddle.net/epicfaace/9p17e2qx/29/
epicfaace
on 25 Jan 2019
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:
nhunzaker
on 28 Jan 2019
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").
beheh
on 4 Feb 2019
Related issues
huxiaoqi567
·
3Comments
tleunen
·
3Comments
jmullo
·
3Comments
krave1986
·
3Comments
jimfb
·
3Comments
Most helpful comment
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.