onBlur event is being called incorrectly when user is typing

Thanks very much for this library.

Problem

The NumberFormat component is calling the onBlur event handler incorrectly. I can also reproduce this in my own project. I can also reproduce this using “@testing-library/react” and “@testing-library/user-event” in this sandbox EDITED (to update all dependencies in the sandbox to the latest versions)

Expected Behaviour

The NumberFormat component should not call onBlur in response to the user typing when they have not tabbed out.

Experienced Behaviour

onBlur is called while typing “123”

It would be much appreciated if you can take a look at the issue.

[jackgeek]

Hi there, I am a colleague of @rohiniseetul working with her on this issue. Together we discovered that this is caused by a bug in JSDOM which is used by Jest. JSDOM is incorrectly sending focus and blur events when you call the focus() method on an input element.

In the browser if you call input.focus() and then call input.focus() again you will get at most one focus event and no blur events for input. But in JSDOM there is a bug which will cause you to get two focus and one blur events for input.

We have found a workaround to fix this problem in JSDOM and we are going to share it with the JSDOM team. I will paste a link to the issue here when I have it.

However we have had a good look at the source code of number-format.js and we cannot see any good reason for the .focus to be continually called as clearly the input already has focus or the user could not be typing in it. What is the reason for this?

Kind regards, Jack

[s-yadav]

I don’t think this is picked. Happy to receive a PR for this. This is the place to look for. https://github.com/s-yadav/react-number-format/blob/master/src/utils.js#L112