search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.
https://intl-tel-input.com
MIT License
7.69k stars 1.95k forks source link

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

Open LouisRoyT opened 2 weeks ago

LouisRoyT commented 2 weeks ago

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

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 commented 2 weeks ago

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.