{options.formatAsYouType = true} interferes with proper formatting of extension numbers
Plugin version
e.g. v24.6.0
Steps to reproduce
- instantiate intl-tel-number (
intl) with the optionformatAsYouType = true - Call `intl.setNumber("4155552671ext.123").
- The number displayed in the
intlinput 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
- instantiate intl-tel-number with the option
formatAsYouType = true - Call `intl.setNumber("4155552671ext.123").
- The number displayed in the
intlinput will look something like :(415) 555-2671 ext. 123. - Calling
intl.getNumber()will return4155552671, and callingintl.getExtension()will return123
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.
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.
I've just tested this with v25.10.1 and it seems to be working fine now! Closing.