search

catamphetamine / react-phone-number-input

React component for international phone number input
http://catamphetamine.gitlab.io/react-phone-number-input/
MIT License
915 stars 193 forks source link

Mobile strange repeated codes #422

Closed lesrpo closed 1 year ago

lesrpo commented 1 year ago

Hello There!

While testing the mobile capabilities, I notice some strange behavior on deleting and typing again the number.

To replicate I use chrome on my mobile phone with the examples page https://catamphetamine.gitlab.io/react-phone-number-input/?#with-country-select

I tested 'Force international format' examples

https://user-images.githubusercontent.com/11498186/216166083-7605009a-de30-4783-8994-48278bbf9986.mp4

Do you have any idea why is this happening?

Thank you

catamphetamine commented 1 year ago

In the first case, you first erase the input so that the caret position becomes 0. Then you enter a digit X and the caret position becomes 1. Then the <input/> triggers onChange() event and the component sets the <input/> value to +X which should also reset the caret position (it should move it to the end). At least that's what it does in a desktop web browser. But for some weird reason, the mobile browser doesn't reset the caret position in that case. So I'd say it's incorrect browser behavior.

In the second case, you erase the 7 character and the cursor "falls through" it. But it shouldn't do that: it should be placed at the end of the <input/> because its value has been changed externally. Same issue.