Click and Mouse Down

Recently I have introduced a JavaScript bug into one of our components while trying to fix another one. With the fix, I added an onBlur event to the input component; and somehow it stopped another event handler, namely an onClick, from working properly – or, actually, at all.

This was a ReactJS component with state. Both handlers interacted with the state and updated it.

The fix turned to be quite easy but worth saving for later. The reason for that bug wasn’t immediately obvious, but it was the order of browser events. Blur comes before click, and any state change in ReactJs triggers a component re-rendering itself. So, onBlur handler caused the render() method to fire and that is why the second onClick handler was just lost.

The fix? Use onMouseDown in place of onClick.

This is the Q and A from StackOverflow which deals with the same problem.
And here is more information about mouse events order and focus events order.


About Maryna Cherniavska

I have productively spent 10+ years in IT industry, designing, developing, building and deploying desktop and web applications, designing database structures and otherwise proving that females have a place among software developers. And this is a good place.
This entry was posted in javascript and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s