{options.formatAsYouType = true} interferes with proper formatting of extension numbers

[LouisRoyT]

Plugin version

e.g. v24.6.0

Steps to reproduce

1. instantiate intl-tel-number (intl) with the option formatAsYouType = true
2. Call `intl.setNumber("4155552671ext.123").
3. The number displayed in the intl input will look something like : 4155552671123.

If you change step 1 above by setting formatAsYouType = false, everything works (except that the input doesn't get formatted as you type, which is to be expected)

You can see this in action in vanilla JS: here
or with the Vue plugin: here

Notice the Vue plugin's behaviour appears almost ok (the 1st click seems to work 100% fine, but clicking a 2nd time destroys all that good behaviour.. somehow)

Expected behaviour

1. instantiate intl-tel-number with the option formatAsYouType = true
2. Call `intl.setNumber("4155552671ext.123").
3. The number displayed in the intl input will look something like : (415) 555-2671 ext. 123.
4. Calling intl.getNumber() will return 4155552671, and calling intl.getExtension() will return 123

Actual behaviour

See section "steps to reproduce"

Initialisation options

• intlTelInputWithUtils

Notes

I'm not 100% sure if the Vue component's behaviour is EXACTLY the same bug as the pure JS version's bug, since behaviours are a bit different. Let me know if you want me to open a separate ticket or if you'd like more information.

[jackocnr]

Thanks for raising this. I don't have time to look into this myself right now, but would welcome a pull request that fixes this issue.