[BUG][MazPhoneNumberInput] Jump cursor; as you type

[Patrick Boos]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://louismazel.github.io/maz-ui/documentation/maz-phone-number-input/
2. Scroll down to Examples
3. Click inside a phone number and enter 1234
4. Move the curser in front of 1 and type 5678 to change the input to 56781234
5. -> Because the cursor jumps to the end it will have the value 51234678 and not what I wanted

Expected behavior
Cursor should stay where it is and the input should now be 56781234

Desktop:

• OS: MacOS
• Browser: Chrome
• Version: 89.0.4389.82

[Jonathan Smithies]

Is there a fix for this yet?

[telion2]

I would really prioritise this issue. I am currently trying to analyse this library and specifically this special Mobile Phone Number Input component.
This Issue quite a show blocker in our Projects.

[telion2]

I blame the set in the main.vue of MazInput here:

maz-ui/packages/components/MazInput/_main.vue

Lines 216 to 227 in 636a5b9

   computed: { 
     inputValue: { 
       get () { 
         return this.value 
       }, 
       set (value) { 
         const valueToEmit = this.hasNumberType 
           ? !value ? 0 : parseInt(value) 
           : value 
         this.emitValue(valueToEmit) 
       } 
     }, 

My guess is that either parseInt or the setter itself "renters" the value in the input, thus pushing the cursor to the end.
My recommendation for input validation is to either supporting masks or just show some kind of error message below the input field.
Or evaluate the input on focusLoose.