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.67k stars 1.95k forks source link

Make input event on setNumber optional #1638

Closed datasage closed 5 months ago

datasage commented 5 months ago

This falls into a feature request than a bug, I will do what I can to explain the scenario.

We have some legacy angularjs code that wrapped this widget. By default, when used in a page, it didn't format the number provided in the input. We used setNumber to trigger a format when the view loaded. This worked ok until a recent change.

The recent change to add an input event on set number broke this. It ends up updating the form element and causing it be dirty which interferes with other code. Arguably the input event is probably the right thing to do, but it broke our implementation.

A solution could be one of two things.

  1. Add an option to setNumber to make the input event optional
  2. Provide an external method to trigger formatting.

Plugin version

We are using the latest version

jackocnr commented 5 months ago

Have you got formatOnDisplay enabled? That should be enough to format the number already in the input when you initialise the plugin.

datasage commented 5 months ago

Yes, that is enabled.

The angularjs code used a directive to wrap the component. When the field is initialized there is no value. Angularjs sets the value, but that path does not trigger formatting. We had code in the directive using get and set number to trigger formatting. With the input event being called, it caused the formatted value to be pushed back to the form binding. If we can make the input event optional on set number the issue would be solved.

jackocnr commented 5 months ago

Provide an external method to trigger formatting

You could use getNumber and then manually format the string using intlTelInput.utils.formatNumber() and then set the input value yourself. Would that work?

You can find more info about the utils methods like formatNumber here: https://github.com/jackocnr/intl-tel-input/wiki/utils.js

datasage commented 5 months ago

Maybe, I will give a shot. The country doesn't get set correctly either at the moment.

The other solution I was considering was to disconnect the element that has the angular js binding from the element that provides the phone widget, then I can can also control when and how values pass between each space.

datasage commented 5 months ago

Disconnecting the bindings so the events on angularjs do not directly affect the component does seem to fix the issue. I still think being able to control events being triggered is preferable when a call is made to an API method. Feel free to close this ticket if you feel otherwise.