React: Bug: Autocomplete not working for controlled input

[robin-drexler]

React version: 16.12.0

Steps To Reproduce

1. Have a form with controlled input (i.e. value is set through onChange handler)
2. Type cheese into the input
3. Submit the form
4. Reload the page
5. Focus the input, type c
6. cheese is not suggested

https://codesandbox.io/s/ancient-currying-oqgt6

It works when a uncontrolled input is used (i.e. value is not set by react onChange handler)

1. Have a form with uncontrolled input
2. Type cheese into the input
3. Submit the form
4. Reload the page
5. Focus the input, type c
6. cheese is being suggested

https://codesandbox.io/s/naughty-dijkstra-p3n42

It's not about autofilling address data or passwords, but data previously filled in by the user.
We noticed this issue in Chrome, Firefox and Safari. Even though we could not get any autocompletion to work in Safari, even without React. (We could in Chrome and Firefox)

Thanks!

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[ced-b]

I seem to be running into the same issue.

The only additional observation that I have is that it seems to show existing autocomplete entries but no new ones are added.

[ced-b]

This is somewhat speculation, but what seems to happen in the DOM is that the value attribute of the input gets set with every key stroke. So when the form is submitted the "system supplied" value and the user input are the same and the browser does not store it for further autocompletion.

[gaearon]

Thank you for reporting this. This is unfortunately a known problem that is being tracked in https://github.com/facebook/react/issues/15739. I will close this as a duplicate but feel free to subscribe to that issue.