Cursor related issues in Android Mobile browsers - version 17.1.8

[dvenkatsagar]

🐞 bug report

Is this a regression?

Not sure

Description

I'm working on a project and using ngx-mask for some masking needs. Currently using Angular 17.3.12 and ngx-mask 17.1.8.

I have the following syntax -

<input type='text' mask="XXX - XX - 0000" [hiddenInput]="true" [validation]="true" required />

We're seeing different issues when entering and deleting the values in the input field on various Android Mobile browsers like

• Google Pixel 7 Chrome and FF
• Samsung Galaxy S23FE Chrome and Edge

For example, for the mask used, if we enter a value "123456789", it works as expected on some mobile browsers and it behaves weirdly in other mobile browsers. As we enter the value digit by digit, the value gets replaced after we enter "XXX - XX" part of the value. Its like the cursor just moves to the pos 0 as we enter the value.

Similarly, another example - if we start pressing the backspace after entering the value "123456789" and remove the digits one by one, the cursor gets stuck at '6' and doesn't proceed. Only way to get around it is to put the cursor back at the right place and then need to press the delete key multiple times.

I've seen other issues reported like #94 and #30 .

🔬 Minimal Reproduction

Stackblitz Example

Open the Stackblitz Example in any Android mobile browser and check if the mask works by entering and deleting values.

🌍 Your Environment

Angular Version:

Angular - 17.3.12
ngx-mask - 17.1.8

Anything else relevant?
Tested the issue on the following browsers:

• Pixel 7 Android 15
  • FF - 134.0.2 Build # 2016068999
  • Chrome - 132.0.6834.163
• Samsung Galaxy S23FE Ultra Android 14
  • Chrome - 132.0.6834.163

[dvenkatsagar]

Tested the same with ngx-mask v19.0.6 and angular 17 on the android browsers and seeing same results. One thing that I found out is that when pressing backspace after entering first 2 characters, it removes both chars . Another thing I found is after typing the entire value e.g 123456789 and then pressing the backspace, and if the cursor is after 9, it moves the cursor left 1 position and deletes 8, leaving 9 as is.

Here is another reproducible example - Stackblitz example with 19.0.6 lib code.

[dvenkatsagar]

As a temporary workaround/solution, using the inputmode="numeric" attribute in the <input> seems to work. Showing the number pad when entering the value instead of the full keyboard and restricting the possible value that can be entered, is a solution I can work with for now.