onBlur event is being called incorrectly when user is typing

[rohiniseetul]

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]

@jackgeek extra call to elm.focus() is happening on setCaretPosition function. (This was required for old browsers. Will check if it is needed now)

@rohiniseetul is this only the test issue or happens on the browser as well?

[rohiniseetul]

@s-yadav as far as I have tested it, the reported issue is happening in the test and not in the browser.

[lainermeister]

Hi all, is this still an open issue or is there a fix in place? Thanks!

[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

[csantos1113]

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

It's been more than 3 years since this comment; and that link doesn't even work anymore 😅

I believe this is still happening with jest (JSDOM). @s-yadav could you please link me to the line you think it's the culprit? I'd like to play with this and see if we can remove it

[s-yadav]

This is the function we need to check if we can get newer version of setCaretPosition. https://github.com/s-yadav/react-number-format/blob/master/src/utils.tsx#L216

[s-yadav]

I think we can just remove the el.focus call from setCaretPosition. I don't see any case where we want to set the caret position, when input is not focused already.