How to prevent overwriting typed numbers in "Date format with mask" example?

[demark]

Currently in "Date format with mask" example ( __-__-____ ) if for instance it has a value "11-22-333" if I put a caret here: 11-|22-3333 and type "44" it will overwrite "22" => 11-44-|3333. Seems like all "Date format" examples have such behavior. How to prevent this? Eg. block any input until you remove at least one number.

Another bug I noticed with this example:

1. Type "11-22-3333|"
2. Move caret to "11-22|-3333" and remove (backspace) two numbers => "11|-33-33__"
3. Type "44" => "11-44-|33__" (expected result: "11-44-|3333").

Thanks in advance!

[istarkov]

have u tried mask={false} prop?

[demark]

https://codesandbox.io/embed/github/istarkov/rifm/tree/gh-pages/codesandboxes/date-format

mask={false} fixes the bug, but still doesn't prevent overwriting typed values. I can get the expected behavior by removing replace prop and setting maxlength="10" input's attribute, but obviously that's no longer an input with mask "__-__-____".

[istarkov]

still doesn't prevent overwriting typed values

what this means?

No overwrite I see, just usual insert with mask={false}

[demark]

Your gif shows I guess the default behavior: 12-34-|1234, type 9999, result => 12-34-9999|. Desired result: no changes at all once mask is fulfilled, ie. 12-34-|1234 (doesn't change on any input and keeps caret position). ATM, you can achieve this with props mentioned in my previous comment, but with a trade-off of disabling the explicit mask feature (ie. __-__-____).

[istarkov]

How to edit if no changes?

[demark]

block any input until you remove at least one number.

In other words, emulate the same behavior as <input type="text" maxlength="10" />. Once you typed 10 chars, input prevents any changes until you remove some chars.

[antiold]

The project text-mask has an option Keep character positions, it avoids any replace when the input is full, more user friendly I would argue. And it gives a nice format that keeps the cursor caret.