Country code doesn't update on UI change after phone number is set

[Deleted user]

Great add-on. I have one issue, and maybe there's a good work-around.

If a user selects a country and then enters a phone number, the number and metadata arguments are passed to the action handler appropriately.

However, if a user selects an initial country, then enters their number, and then goes back and toggles their country selection to a different country, while the number argument updates in the action handler, the metaData argument will not. This could lead to a user accidentally saving their number with the wrong country code.

Example:
{{phone-input number=user.phoneNumber update=(action 'updatePhoneNumber')}}

    updatePhoneNumber(number, metaData) {
      console.log('number', number) // always logs the correct, updated number
      console.log('countryCode', metaData) // only logs first selection
    }

Am I missing something here?

[Deleted user]

Ok, so, for now, the workaround is to extend PhoneInput, listen to "countryChange", and call setCountry() like so:

// app/components/phone-input.js

import PhoneInput from 'ember-phone-input/components/phone-input';

export default PhoneInput.extend({
  didInsertElement() {
    this._super(...arguments);
    this.get('element').addEventListener("countrychange", this.onCountryChange.bind(this));
  },

  willDestroyElement() {
    this.get('element').removeEventListener("countrychange", this.onCountryChange.bind(this));
  }, 

  onCountryChange() {
    this._iti.setCountry(this._iti.getSelectedCountryData().iso2);
    this.input();
  }

});

[dcyriller]

Hello @Kira-Pilot91, sorry for the delay!
Nice workaround. We could make it a default. A PR would be welcomed :)

Also, the function onCountryChange could be slightly refactored to:

  onCountryChange() {
    this.input();
    return true;
  }

to trigger intl-tel-input behavior.