Cleave.js: Focus event is triggered in Safari if React Cleave field is rendered after some action

[vgrbr]

I have an issue with triggering focus event on React Cleave field only in Safari if Cleave field is rendered async. In Chrome && FF works as expected.

Here is a quick demo with 5 Cleave fields and one regular text input:

https://jsfiddle.net/d49nmtvp/3/

Bug:

Browser: Safari 10.1.2 && Safari Technology Preview

Reproduce: go to https://jsfiddle.net/d49nmtvp/3/ with Safari and click show

Expected results: no focus triggered (all values .should be 0)

Actual result: focus is triggered for React Cleave fields (values are 1 for all fields expect plain input field)

It seems that setSelectionRange from https://github.com/nosir/cleave.js/blob/master/src/Cleave.react.js#L348 is triggering focus in Safari

[eugene1g]

This is also the case in IE11, so when you render many input fields they all get rapid focus in succession until the last one. If the last one is at the bottom of the page, the page ends up scrolled down to that element.

[wieseljonas]

Any news on this?

[sandeshds]

I am facing the same issue. We are doing some validations onBlur , and since cleave triggers onFocus event of all fields , it also triggers the corresponding onBlur event , hence displaying error messages even before the user interaction.

[ericbai]

A possible workaround would be to integrate the jQuery library instead of using the pre-built React component. Doing so, you can avoid triggering setSelectionRange in the offending handler.

[nosir]

Fix merged, and published in v1.0.2.
Could anyone please check if this issue still exists?

[vgrbr]

@nosir thank you very much :)
I just checked in Safari and it works as expected.

[nosir]

Awesome, big thanks to @bitionaire