Cannot change the mask on multiple masks when the input is already filled.

[WebCimes]

I am experiencing strange behavior. If I create two masks on one input like this:

Inputmask({
            mask: ["aaa-9999-*", "9999 9999 9999 9999-9"],
            casing: "upper",
            keepStatic: true,
        }).mask(inputElement);

When I type in the input field, I can select mask 1 aaa-9999-* or mask 2 9999 9999 9999 9999-9. Inputmask works as expected.

If I type something using mask 2 and complete the entire mask, for example, 5486 5555 6666 7777-2, and then save my input, when I return to this edit page, I can delete the input with backspace and type something that matches mask 1.

However, if I type something but do not complete mask 2, for example, 5486, and then save my input, when I return to this edit page and try to switch to mask 1, I cannot. If I delete 5486 with backspace, I can only type using mask 2 (I cannot switch to mask 1).

Do you have any idea what the problem might be?

[RobinHerbots]

@WebCimes ,

Which version are you using of the inputmask? Did you try with the latest beta?

[WebCimes]

@RobinHerbots I used version 5.0.9, but I have also tried with version 5.0.10-beta.11, and the same problem occurred.

I have found three ways to return to mask 1 in this situation (if I type something but do not complete mask 2, for example, 5486, and then save my input. When I return to this edit page and try to switch back to mask 1 by backspacing all characters):

• Fill mask 2 entirely, then if I backspace all characters, I can go back to mask 1.
• CTRL + A (select all) on the mask 2 input, then if I use backspace, I can go back to mask 1.
• Use the option autoUnmask: true, which allows me to use backspace directly and return to mask 1, but I would prefer to preserve the mask when the input is saved and filled after refresh the page.

Thanks!

[RobinHerbots]

However, if I type something but do not complete mask 2, for example, 5486, and then save my input, when I return to this edit page and try to switch to mask 1, I cannot. If I delete 5486 with backspace, I can only type using mask 2 (I cannot switch to mask 1).

Can you make a codepen for this case? I cannot reproduce it here.

[RobinHerbots]

Or do you mean you have mask 2, you select all and want to start typing mask 1?

[WebCimes]

@RobinHerbots I have created a CodePen here: https://codepen.io/WebCimes/pen/RwXWBgx.
The value set in the input is the one I get when I save my input.
After refreshing the page and filling the input with this value, you can see the same example on the CodePen page.
If you click once in the input field after 5486, and then try to backspace all characters, you will remain on mask 2 (unless you select all the content in the input field or use autoUnmask: true).

Thanks!

[RobinHerbots]

@WebCimes,

Ah, that because when setting the value "5486 ____ ____ ___-" the spaces and dash are considered entered and so removing the numbers only isn"t sufficient. You want to save the masked value in the DB (or something alike)?

Using something like this should fix it

Inputmask({ mask: ["aaa-9999-*", "9999 9999 9999 9999-9"], casing: "upper", keepStatic: true, onBeforeMask: function (value, opts) { return Inputmask.unmask(value, {mask: opts.mask}); } }).mask(document.querySelector("input"));

[WebCimes]

@RobinHerbots Thanks for your help, it seems to work when the cursor is placed after 5486 + space (able to change mask):

However, if the cursor is directly positioned after 5486 (without space), the problem still persists (unable to change mask):

You can see this behavior on the new CodePen: https://codepen.io/WebCimes/pen/bGXVJOp.

It would be great to have an option similar to autoUnmask, but one that can handle input with a masked value (fully or partially filled), like 5486 ____ ____ ____-_