🐞 - Backspacing causes Maskito to insert random numbers

[propkitty]

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

@maskito/kit

Playground Link

https://mfforf.stackblitz.io

Description

I tried everything I could to get that stackblitz playground to work but I just can't figure out how to set up Maskito the way that is told to be done with the date kit. :(

Steps to Reproduce:

1. Have Maskito date up and running like the kit says to set it up with the maskitoDateOptionsGenerator({mode: 'mm/dd/yyyy', separator: '/'});
2. With a MM/DD/YYYY date set up, enter any valid date - ex: 12/31/1986
3. Hit left arrow key twice or click between 9 and 8.
4. Hit backspace twice.
5. 19 is replaced by 00, then it's replaced by 19.
6. Cursor jumps to the end of the date.

This is very small, but it is a bit of a pain. If the cursor stayed after the 9 when it resets from 00 to 19, it wouldn't be so bad, but it's definitely a little annoying and I think an unexpected action for users. I think rather than replacing the 00 to 19, and really anywhere you try to backspace and it replaces stuff with a 0, just let the user backspace and fill in. Having stuff randomly replace could lead to an incorrect date being written in there or user surprise/frustration, and any dev worth their salt will have secondary validation going. It's confusing enough that it got labeled as a bug by two different people on our QA team.

Maskito version

3.2.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[nsbarsukov]

@propkitty Hello!

Unfortunately, I cannot understand how to reproduce your case using your description.

19 is replaced by 00, then it's replaced by 19.

Especially "then it's replaced by 19" is most unclear for me.
Could you provide more description about this step ? Could you also attach a video ?

[nsbarsukov]

As for this lines

and really anywhere you try to backspace and it replaces stuff with a 0, just let the user backspace and fill in

We replace all deleted zeroes by zero on purpose.
Otherwise, it is impossible to achieve the goal "textfield always contains only valid date segments".
We didn't use this strategy before and it caused even more troubles for our users.

For example (if disable this logic):

// mode: 'mm/dd/yyyy'
12|.31.2024 => Press Backspace => 1|3.12.024

This shift produces date with invalid month segment (and it is impossible to understand – is it just an intermediate value during user typing or already invalid final value).
Moreover, this shift decreases UX significantly.