New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Chrome Autofill overwrites values on controlled components #14694
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. |
^^ That's right. Here's a working example using the onChange suggestion: https://jsfiddle.net/epicfaace/9p17e2qx/29/ |
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: |
This might be at least partially resolved by #13525 ("Stop reflecting input values in the value attribute"). |
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
The text was updated successfully, but these errors were encountered: