[BUG][MazPhoneNumberInput] Removing or adding characters in the middle of the string jumps the cursor to the end

[Muntrue]

When you want to modify a phone number by removing or adding characters in the middle, it will jump the cursor to the end of the string after modification

Steps to reproduce the behavior:

1. Enter a number into the phone-number field (ex: 1234567)
2. Move the cursor to the number 4 in the string and hit backspace
3. The cursor will automatically move back to the end of the string.

Expected behavior
The cursor should remain on the users selected position after modification.

Desktop (please complete the following information):

• OS: Windows 11, Windows 10
• Browser: Chrome, Edge, Firefox
• Version: Does not seem applicable

[LouisMazel]

Hi @Muntrue

Which version of maz-ui do you use ?

Thanks

[Muntrue]

Hi @LouisMazel
Currently using version 2.3.12

  version "2.3.12"
  resolved "https://registry.npmjs.org/maz-ui/-/maz-ui-2.3.12.tgz"
  integrity sha512-girLcfLZTkwvyi7P6HKzhekJedqDTUs68tnvcyS7elUj35IGaEjgKXlsGfZmo2bqlfmJFoYOK79Wwv44NE71kQ==

I see the same behavior happen on the official documentation page https://louismazel.github.io/maz-ui/documentation/maz-phone-number-input/

If you need further input, i will be happy to provide!

[LouisMazel]

Thanks for the informations.

I'm currently working on the Vue 3 version and I see the same bad behavior.

It's because of the AsYouType feature from libphonenumber-js. It rewrites the whole string, so the cursor position is lost.

I'll investigate and try to fix it on both version (2.x & 3.x).

I'ill give to you an update here when it's done (or not).

[LouisMazel]

@Muntrue

Solved in both version:

• Vue 2 : Release - maz-ui@v2.3.13
• Vue 3 : maz-ui@3.0.0-next.1

Enjoy