jackocnr / intl-tel-input

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

InitialValue in react component does not set the number and country state values. #1591

Closed KalvinHom closed 5 months ago

KalvinHom commented 5 months ago

Steps to reproduce

  1. Set initialValue in the react component
  2. Do not update the country or phone number
  3. Try submitting a form with the country and number state fields
  4. number and country fields are actually blank because no onChange occurred

Expected behaviour

number and country state fields are populated with the initialValue and its correct country.

Actual behaviour

The variables are not populated.

Initialisation options

initialValue="+15555555555"

jackocnr commented 5 months ago

Good catch! Thanks for reporting.

I have a feeling the problem is just that we're initialising the plugin before we start listening for the "countrychange" event (which, in turn, triggers a call to the update function), so I think all we need to do is switch lines 52 and 53 in react.tsx.

Although that relies on the plugin triggering the "countrychange" event during initialisation which I'm not sure if it does or not - if it doesn't, we'll need to add that as well.

I'm AFK at the moment, but would welcome a PR.

KalvinHom commented 5 months ago

I took a look at this, and that didn't quite work.

The _setInitialState doesn't actually call _triggerCountryChange. However, when I tried adding it there, that still doesn't work because the react component won't have the itiRef.current set yet from having the plugin intialization complete. The getNumber also won't work yet because the utils would not be finished being loaded.

Instead, I had the react component directaly call the onChange actions in its useEffect when there is an initialValue, which worked.

https://github.com/jackocnr/intl-tel-input/pull/1595