Auto-Fill with redux-forms
I had the problem that my browser auto filled my password and email address for a Login Form build with redux-forms. While this should ideally be a benefit rather than a problem let me clarify: Submitting the form showed an error, that both fields need to be filled. I will now explain why this happened and how to fix the problem:
Why?
To understand why this happens you need to know the following things about my setup. I use
The last point is the problem. The HTML page gets rendered by the server, including the input fields and parsed by the browser. The browser auto-fills my email and password (chrome and safari even dispatch a change event), React and Redux get initialized on the client side, unaware of the input values of my input fields.
We could fix this problem by opting out of server side rendering, but it has way too many advantages, so let’s forget about that.
How?
This is in fact quite simple; we will simply get the value of the inputs on mount and inform redux-form about it. To give you an example, let’s assume we have a component like this:
We simply add refs and a componentDidMount method like this and we are done. Please note, that onChange does not add a listener, but is the callback used be redux-form to determine something changed.
Want to hear more from me? Feel free to subscribe to my newsletter; I send out news roughly once a month.
