Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Reactions:8
Comments:7 (2 by maintainers)

Top GitHub Comments

10reactions

nosircommented, Oct 24, 2017

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

2reactions

eugene1gcommented, Sep 13, 2017

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.

Top Results From Across the Web

Safari onClick event to focus() not working in React

I have the following code below. The input is not being focused inside safari. Any idea why? This works in Chrome. focusInput: function()...

Cleave.js – Format input text content when you are typing

When I'm just trying to get past a signup form, please don't make me re-learn a new way to type. Here, the delete...

Cleave.js: format input Text Content When You Are Typing

Cleave.js: Format input text content when you are typing. Cleave.js has a simple purpose: to help you format input text content automatically.

Infrequently Noted

All iOS browsers present as Safari to developers. There's no point in recommending a better browser because none is available. The combined mass...

sitemap-1.xml - LogRocket Blog

... ://blog.logrocket.com/the-state-of-react-native-web-in-2019-6ab67ac5c51e/ ... https://blog.logrocket.com/a-complete-guide-to-the-node-js-event-loop/ ...