taiga-family / maskito

Collection of libraries to create an input mask which ensures that user types value according to predefined format.
https://maskito.dev
Apache License 2.0
1.34k stars 30 forks source link

🐞 - Android 8.1 mask double character glitch #1444

Open superlazycoder opened 1 month ago

superlazycoder commented 1 month ago

Which package(s) are the source of the bug?

@maskito/angular

Playground Link

https://youtu.be/bBn9zYWMjUo

Description

this application runs on android 8.0 and 8.1 and has these issues. Running on newer android devices it does not seem to have these issues.

I attempted to disable the autocomplete and autocorrect on the inputs but that did not solve anything.

When I have a maskito mask that has a non typed character, the correction will duplicate the number pressed when the space is added.

The phone number will start with +1 which does duplicate the 1 but that is because a 1 is allowed. However any other number

the dollar text field demonstrates the decimal and will duplicate both after the $ and after the .

Maskito version

3.0.0

Which browsers have you used?

Which operating systems have you used?

nsbarsukov commented 1 month ago

@superlazycoder Hello!

Create reproduction using StackBlitz, please https://stackblitz.com/edit/maskito-starter-fallback

nsbarsukov commented 1 month ago

Also, explore maskitoStrictCompositionPlugin plugin, please https://maskito.dev/core-concepts/plugins#strict-composition

superlazycoder commented 1 month ago

I have not been able to get the stackblitz share url to work on any machine. Much less the mobile device in question.

these are the masks I use.

const moneyOptions: MaskitoOptions = maskitoNumberOptionsGenerator({ decimalZeroPadding: true, precision: 2, thousandSeparator: ',', decimalSeparator: '.', min: 0.0, max: 999.99, prefix: '$', });

const phoneOptions: MaskitoOptions = { mask: [ '+', '1', ' ', /[1-9]/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ], };

each time the field reaches a static character, it doubles the input.

I have tried the strict composition, which is a fix for the autocomplete. It did not solve the issue.

I attempted originally to disable the autocomplete, and that did not fix the issue.

The only fields with the duplicate data are the ones with maskito masks on. And only on the older android operating systems. Unfortunately I am stuck with the operating systems.

Without being able to get the stackblitz link to work anywhere other than the original embeded window, the page does not afford me the ability to test it on my machine.

This is the link nonetheless. https://maskito-starter-fallback-7ubvmb.stackblitz.io/

nsbarsukov commented 3 weeks ago

@superlazycoder Hello!

I've tried some Androids – the bug is not reproducible. I've used your StackBlitz and the following example from documentation https://maskito.dev/recipes/phone


Samsung Galaxy Note 9 Android, v8.1

https://github.com/user-attachments/assets/65f91cf3-ef32-48db-aab9-2786e4a3c669


Samsung Galaxy S9 Android, v8.0

https://github.com/user-attachments/assets/7e2c4052-ce77-4b09-b982-aaeb77f51849