[Issue][MazPhoneNumberInput] Formatting issue when editing value in the input

[obrassard]

Describe the bug

When the field contains an already formatted phone number, you place the cursor somewhere in the middle of the phone number in text entry and press the backspace key to change the value, the phone number formatting disappears, the "+" symbol is added to the beginning and the cursor moves one position to the right.

See this screen capture video :

https://github.com/LouisMazel/maz-ui/assets/17227551/631e62ac-2dd1-4817-a477-55d05acd060d

Note, this shift doesn't occur when backspacing from the end of the text field

To Reproduce

1. Navigate to https://maz-ui.com/components/maz-phone-number-input
2. Enter a complete phone number in the field, for instance, 5141234567. The value is correctly formatted as (514) 123-4567 
3. Move the cursor somewhere at the middle of the phone number, e.g between 2 and 3
4. Hit backspace to remove the 2
5. The formatted value in the input changes from (514) 123-4567 to +1514134567 

Expected behavior

I would expect the value to stay formatted properly ((514) 134-567 without +1) as when typing normally or backspacing from the end of the input.

Screenshots

See video above 🔼

Desktop (please complete the following information):

• OS: MacOS
• Browser: I could reproduce the issue on Chrome, and Safari. (Did not tested it on Firefox)
• Version: v3.31.6

[LouisMazel]

Hi @obrassard,

Thanks for your feedback.

It's a bit complex to resolve, I need time to make something clean. I keep you in touch here when it's done.

You can also contribute :)

[LouisMazel]

Hi @obrassard,

I completely rewrote the component to improve it and fix some bugs. I released v3.37.2 and this version fixes your bug.

Let me know if anything doesn't work as expected.

Enjoy