Problems with deleting static chars in alternator mask

[kleinph]

• Describe the bug

I am trying to create an input for IBANs where the mask changes by country (determined by the country code, first two chars).

This seems to work with altenator masks, but there is strange behaviour when deleting inside the entered value. Chaning the country code in an complete IBAN triggers multiple issues:

Double deleting and wrong formatting

1. Enter AT703219514513719557.
2. Move caret after AT.
3. First backspace does nothing.
4. Second backspace deletes both characters.
5. Formatting of input is wrong (last 8 characters are one group instead of two).

Wrong mask

1. After deleting AT enter DE.
2. Delete DE and enter AT again.
3. Last two placeholder remain, although the AT mask would be shorter.

Unable to delete country code

1. enter DE16500105177187882946.
2. country code cannot be deleted.
3. The formatting changes (last two 4-groups are merged to an 8-group).

• Add a link to a codepen, jsfiddle or other example page which shows the problem
  https://stackblitz.com/edit/typescript-4yu45b
• OS: Windows 10
• Browser: Firefox 104, Chrome 105
• Inputmask version: 5.07 and 5.0.8-beta.25

[RobinHerbots]

@kleinph ,

With Version: 5.0.8-beta.76.

Douuble deleting and wrong formatting
Enter AT703219514513719557.
Move caret after AT.
First backspace does nothing. => TODO
Second backspace deletes both characters.
Formatting of input is wrong (last 8 characters are one group instead of two). => FIXED
Wrong mask
After deleting AT enter DE.
Delete DE and enter AT again.
Last two placeholder remain, although the AT mask would be shorter. => FIXED
Unable to delete country code
enter DE16500105177187882946.
country code cannot be deleted. => FIXED
The formatting changes (last two 4-groups are merged to an 8-group). => FIXED

[jschmied]

Additional:

With mask:
ibanMasks = [
"\AT9{2} 9{4} 9{4} 9{4} 9{4}",
"DE9{2} 9{4} 9{4} 9{4} 9{4} 9{2}"];

If I enter "AT00 0000 0000 ..." and read the value I get "A00 0000 0000 ..."

Initialized with:

Inputmask({
mask: ibanMasks,
casing: "upper",
autoUnmask: true,
clearMaskOnLostFocus: false,
keepStatic: false,
placeholder: " "
}

[kleinph]

@RobinHerbots sorry for the late reply and thanks for taking care on this issue.

The problem not being able to delete DE still occurs when testing in a freshly initalized input (in 5.0.8 and 5.0.9-beta.7).

Also there is another strange behaviour in latest stable (5.0.8, occurs not in 5.0.9-beta.7):

1. Enter AT703219514513719557
2. Place the caret before A and delete AT
3. Enter DE
4. ES appears instead.

I made a new reproducer with version 5.0.9-beta.7: https://stackblitz.com/edit/typescript-mts8xx

[RobinHerbots]

Additional:

With mask: ibanMasks = [ "\AT9{2} 9{4} 9{4} 9{4} 9{4}", "DE9{2} 9{4} 9{4} 9{4} 9{4} 9{2}"];

If I enter "AT00 0000 0000 ..." and read the value I get "A00 0000 0000 ..."

Initialized with:

Inputmask({ mask: ibanMasks, casing: "upper", autoUnmask: true, clearMaskOnLostFocus: false, keepStatic: false, placeholder: " " }

autounmask wil only keep the entered input. by default.

adding the following option fixes this.

  onUnMask: function (mvalue) {
    return mvalue.replace(' ', '').replaceAll('_', '');
  },