I am working on revamping my dynamic website generator thephpcode.com. Last time when I implemented 10 years ago, I choose KnockoutJS for binding data model to the UI as there were not many options at the time. But this time planned to migrate to React JS. I still loves the KnockoutJS for its minimal library size (<20Kb) and many other features such as the model is executed directly in the browser hence doesn’t need any webpack. This helped as my website provide an options for generating custom modules, so it will be straight forward as I can generate entire model from php code instead of generating React Code then converting it using webpack.

But the process was not smooth as I planned since my data model is nested to many level and there is many inter dependencies between them. A website can contain many models, models can contain many fields, actions and templates then fields from one module can refer a field from another module. So I had to convert them in to flat model for efficiently managing them in Redux state.

Why sometime form fields loose focus?

When you are using forms in ReactJS and if your form field focus as soon as you enter each character it could be caused by following reasons.

Parent Component data changed by child

When your page has nested react routes and if the component changes data when changing form values of the parent component state the react router will cause re render of the parent component as well. This way the focus on the form fields will be lost.

This could be avoided by nested data and keeping the data at root level as possible for each components. For example I ad following data model.

website
  - modules[]
     -fields[]
     -actions[]
     -views[]
       -fields[]

The react route also had 3 levels for website / modules / fields. When ever something changed in fields when the values updated at the website data storage everything re-rendered. So as a solution I had to move modules outside the website so that anything changed in modules doesn’t cause re-render on the parent route.

Onclick action on link doesn’t prevent default browser action

Another time I faced issue of loosing form focus was when I had onclick action on the links and the onclick function doesn’t prevent the default browser actions.

In this scenario let say our link is pointed to href=”#” the browser will redirect to append # to the URL. So the entire route will re-render and you will loose focus when you type first letter in the form field. This could be avoided by using preventDefault() call on the event object within the event handler function.