Android Chrome: PhoneInput with maxLength and smartCaret has weird cursor side effects

[Jonathan Villanueva]

When entering more than the max amount of digits on Android Chrome the cursor will move back and be positioned strangely.

Screen.Recording.2023-10-05.at.12.31.43.PM.mov

[Nikolay]

Post your code.

P.S. I dunno what might be the case in your case, so there won't be a solution in this thread.

[Jonathan Villanueva]

                        <PhoneInput
                            data-testid="PhoneInputInput"
                            country="US"
                            value={value || undefined}
                            onChange={onChange}
                            type="tel"
                            defaultCountry="US"
                            autoFocus={true}
                            limitMaxLength={true}
                        />

    const onChange = (value: string) => {
        setFormData({ ...formData, phone_number: value })
    }

[Nikolay]

I see, so the bug only manifests when limitMaxLength property is used.

I saw weird caret behavior on Android in the past years. Usually it happens in unconventional browsers that don't handle dynamic caret positioning properly. In the older years, that was Samsung Browser, for example.

I'd mark this one as "won't fix".