backspace buggy behavior

[Travis]

Describe the bug

When backspacing, the cursor moves to the end of the input instead of allowing the user to make a simple edit

Steps to reproduce

Use this mask setting:

  <app-input
    v-maska
    :model-value="inputValue"
    @maska="onInput"
    data-maska="(###) ###-####"
    placeholder="(###) ###-####"
  />

Now type in the input box: 1234567890, now, put your cursor here: 1234|567890 and press backspace to delete the 4. The cursor should remain in the same position, not jump to the end. Otherwise, the user can't make simple edits and they need to delete the entire input.

I suspect this is easy enough without a code sandbox but if not let me know

[Alexander Shabunevich]

Yes, please provide the sandbox. Because in my examples cursor remain in the same position after deleting.

[Travis]

Ok 1 moment

[Travis]

Hmm I see... this is problematic (on something else now not this). It's from something else (I set the value from another component and that must reset it)

[Travis]

As a sidenote... totally no worries if you dont feel like answering this, but given you write a masking plugin maybe you know better than anyone else.

Do you know the best way to handle storing a "normalized" value in the form state?

I have a very complex, multi-step form and the entire thing comes from the server. I am using the mask plugin for date of birth, phone, etc. The value I need to send to server is a normalized version:

* [phone]      =>       7777771111
* 01/01/1980            =>       1980-01-01T00:00:00Z

There are a number of issues:

• a date can't be stored in a partially normalized state because its a date, so it's all or none.
• a phone number is easier, because it can always be stored as normalized (add chars, or strip non-digits). But you can also see the problems the problem created by this (this issue). By emitting the normalized value, it gets re-parsed and cursor position is lost

I cant just hardcode them and would rather push the state/logic into the components.

if you have any ideas id love to hear, but no biggie otherwise as this is completely unrelated

[Alexander Shabunevich]

Maybe you could store in the form state non-normalized version, and normalize data only before sending to server?