Controlled input makes browser not saving submitted value (for autocomplete)

[bootleq]

Bug (behaves different per browser, but generally inconsistent to uncontrolled inputs)

Current behavior Reproduce with https://jsfiddle.net/bootleq/hos4r6qd/

1. Type a in name field, and b in uncontrolled field.
2. Submit.
3. Re-run the fiddle.
4. Focus input fields to see if browser "saves" previous input.

Expected behavior Browser provides a suggestion for name and b for uncontrolled field. Controlled and uncontrolled elements should behave the same.

Actual result Uncontrolled input has b suggestion, but controlled input (name) has no suggestion. Tested on Windows 7, Google Chrome 74.0.3729.169. And on Firefox 68.0b4, we can click the workaround button before submit, by reset the value DOM attribute it behaves as expected.

[anupmishra203]

Uncontrolled value saved on the window, whereas the controlled input value saved in their state. Once the state has gone their value gone as well.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[gaearon]

Oh wow. Good find. I guess this is also due to attribute syncing. We're going to fix this eventually but it would be a breaking change so for now let's keep it open.

[Hadsch]

@gaearon: Are there any plans to fix this? It almost 2 years since the report and at least in my eyes this is a huge UX bug.

This bug affects other frameworks (antd, material UI):

• mui-org/material-ui#16943
• ant-design/ant-design#21232

I'm also not getting it, why this one should be a breaking change.

If autoComplete is "on" react could to this setAttribute('value', ''); under the hood and it would be fine. Or are there any side effects if you are doing this?

[hejtmii]

Same problem here

[snehabn92]

autoComplete is Not working for controlled Input.

https://jsfiddle.net/bootleq/hos4r6qd/

[handhikadj]

This also affects Formik performance, which is very bad https://github.com/formium/formik/issues/3165

[TejSanura]

I am not even using controlled input. Still I am facing this issue when using Firefox. I am just using input type text and the fetching the value using id on the time of submit form. Still it won't show the auto-fill suggestion box. Anyone has any idea? I have already kept "Remember search and form history" in Firefox settings checked.

[ahoisl]

Just to mention that there is a "workaround" (=wild hack) we used successfully for more than a year now: https://github.com/facebook/react/issues/18986#issuecomment-636354428

[lindskogen]

There actually has been some activity on the Firefox side to solve this: https://bugzilla.mozilla.org/show_bug.cgi?id=1642570

It's already working in Firefox Nightly for me and seems to be scheduled for release in version 105, 2022-09-20

[lindskogen]

Tested it right now in Firefox 106.0.3 and it seems to work!