Cursor doesn't keep up with typing on some Samsung Android phones

This reproducible on my Huawei running Android 6.0, and on Samsung S8+ phones. It happens with and without type="tel" in the <Phone> declaration, so I don’t think it’s related to this issue.

Set the country to “UK”, and type in “077915”. The input will contain “07791 5” (with a space) and the cursor will be positioned before the 5. Typing “67890” after this results in “07791 678905” instead of “07791 567890”.

It appears that on these devices that doing a complete onChange -> setState -> render cycle results in the cursor being positioned incorrectly. Calling setState in a setTimeout callback seems to fix it.

Here’s a pull request that seems to resolve the issue on my device: https://github.com/catamphetamine/react-phone-number-input/pull/74

[catamphetamine]

@Xopsy wow, thanks for thorough testing 👍 Ok then, it works.

Samsung seems to be a really big company that can afford writing its own everything: their own Android shell, their own Bixby, their own web browser… Looks like another Microsoft to me.

I added a smartCaret={false} property which sets inputComponent to <BasicInput/>. Use it instead of passing inputComponent={BasicInput} directly.

The demo has also been updated with an example of using the smartCaret={false} property.

[Xopsy]

Hey @catamphetamine, I did test right now with new version and still working fine in my samsung phone.

I’ve tested to different browsers from Samsung Galaxy S7 Edge:

Chrome ✅ Firefox ✅ Samsung Internet Browser ❌

Even I have simulated with Xcode iPhone X (Safari Browser ✅) is working fine.

But for main mobile browser (Chrome and Safari) is working fine.

The problem only persist with that Samsung browser but this one is a minor issue, I haven’t tried other browsers. You have more here.

Also I leave a codePen. I did quickly test in there. Everyone can check it for their self.