MaskedTextField with mask overwrites characters to the right

[malmil]

Environment Information

• Package version(s): office-ui-fabric-react 7.129.1
• Browser and OS versions: Chrome

Codesandbox:

https://codesandbox.io/s/keen-sunset-khegc?file=/src/App.js

My code is essentially just:

<MaskedTextField
    label="With input mask"
    mask="999 999 999"
    maskChar=""
/>

Actual behavior:

If I type 12345 and set the cursor between 3 and 4 and start typing this will overwrite the 4 and 5. Eg. I write 77 the output will be 12377

Expected behavior:

I want to be able to type in the input field, realize I missed a number in between and add that number without overwriting anything. Eg. I add 77 in between and the output will be: 123 774 5

Priorities and help requested:

Requested priority: Normal

[paulgildea]

@malmil Thanks for the feedback!

[malmil]

Are there any updates on this? Or workarounds?

[khmakoto]

Hi @malmil, sorry for not attending the issue in a while! I think the concern is valid but there are a couple of open questions if we go for an approach in which we don't replace the elements in the mask.

Say, for example, that you have a mask (???) ??? where the mask character was ?. In your suggestion having written (123) ???, focusing between 2 and 3 and writing 4 should result in (124) 3??. There isn't a problem there.

But now let's think of a scenario with the same mask and a fully completed TextField as in (123) 456. If we proceed to focus between 4 and 5 and write 7, should the result still be (123) 456 or should it now be (123) 475?

We need an answer to that question if we are to commit with this approach and document it properly. If we decide that the current behavior is by design then maybe the action item would be to document that focusing in between already filled mask characters will override them instead of pushing them.

@ecraig12345 what are your thoughts about this?

[ecraig12345]

I think if the mask is full, you should have to delete something before more entries will be accepted.

Another scenario to consider is if inserting a character in the current position would push any other characters forward into positions where they're not valid. For example if the mask was (999) aaa, and you'd so far written (123), focusing between 2 and 3 and writing 4 would push the 3 into a spot where it's not valid.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.