Manually trigger the "onChange" function after chaging phone state value

[JohannCarfantan]

Hello,

I'm using your component, which is beautiful, in my app and I'm probably in a special case but I'd like to ask you directly if there is a solution.

Here is my situation :

const [phone, setPhone] = useState('');

...

<PhoneInput
      defaultCountry="FR"
      value={phone}
      placeholder="Numéro de téléphone"
      onChange={setPhone}/>

I'd like to inject an existing phone number that I get from my application into your component to get the international format output. In my example I'm using French as default country but you can imagine the same situation for any country. The objective is to automatically complete the phone number input when the phone number is available on my app.

Phone numbers I'm getting from my app are either locale format or international format (and my app is not able to tell me which one is it). When I'm typing these numbers (both format) in your component input magic appears and the output in the "phone" variable is always at international format and this is exactly what I'm looking for.

My first idea was, obviously, doing this :

setPhone("//Here my phone number from the app

But in doing this, I'm loosing the current defaultCountry which automatically switched to "International" and so I loose the international output in my variable. The solution in my case is to select the "France" country in the list if I want to get this back.

So, my question is : Is there a way to inject a phone number in your component as if I was typing it and keeping the selected country?

My second idea was to :

let test = document.getElementByClassName("PhoneInputInput")[0];
test.value = //here my phone number as a string
test.dispatchEvent("input",{bubbles:true});

The idea here was to change the value of the input with dom and send event to your component so that he could do his job like if it was a keyboard input... But nothing happens...

I don't know if you understand my problem, but If you do, do you have a solution or a workaround ? PS : excuse my english

[catamphetamine]

So, my question is : Is there a way to inject a phone number in your component as if I was typing it and keeping the selected country?

There's no such way. The only way one could "inject" something is by supplying value property which is supposed to be in international format. To format phone numbers from local to international one could use libphonenumber-js library.

[catamphetamine]

I don't know if you understand my problem, but If you do, do you have a solution or a workaround ?

I guess the only issue is that you didn't know how to convert "local" value to "international" one. Does it resolve your case?

[JohannCarfantan]

I'll try by converting to an international format with the lib you said, thank you. My question is more : Is there a way to supply a phone number with a locale format corresponding to the defaultCountry locale format by changing my variable state? But It seem's that it's not possible as you said, I would have loved this possibility. I'll try by converting to international format.

Thanks

[catamphetamine]

My question is more : Is there a way to supply a phone number with a locale format corresponding to the defaultCountry locale format by changing my variable state

There's no such feature and there won't be.

But It seem's that it's not possible as you said, I would have loved this possibility.

There's most likely some other way of doing something you were planning to do.

[JohannCarfantan]

parsePhoneNumberWithError function of libphonenumber-js with second argument 'FR' does exactly what I want, thank you. So, when supplying the international format on your input it works fine. thank you for your time