primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.82k stars 1.18k forks source link

InputMask: Cursor bug on Android devices when having a mask like (000) #5164

Open keremozben opened 7 months ago

keremozben commented 7 months ago

Describe the bug

On Android devices, when having a mask for phone numbers like this (999) 999 99 99, if you try to delete the value and if the cursor moves to the left of the first paranthesis, entering a new value becomes problematic because cursor moves irraticly.

Reproducer

can-not-fork-due-to-error

PrimeVue version

3.47

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Use an Android mobile device

Set a mask like (999) 999 99 99 Enter a value Delete it by pressing delete key, cursor moves to the left of the first paranthesis. Try to enter new value such as 535 000 00 00 The value inside the paranthesis should be 535, but becomes 355 due to cursor position

Expected behavior

Entered value should be correct

mertsincan commented 7 months ago

Thanks a lot for your report! I set a milestone for it. We'll check it before the milestone is released.

tugcekucukoglu commented 4 months ago

We cannot replicate the problem. How can we reproduce the issue?

keremozben commented 3 months ago

@tugcekucukoglu Sorry for late response, here is how you can reproduce the issue.

Use an Android mobile device please.

Set a mask like (999) 999 99 99 Enter a value Delete it by pressing delete key, when the cursor is on the left side of the first paranthesis, try to enter another value like 535 inside the paranthesis. The value should be 535, but it became 355. The cursor shifts the numbers to the right somehow.

Here is an example video. https://github.com/primefaces/primevue/assets/1444098/a80d4e72-348e-4869-a89b-1f34c90fba8d