Add method to update countryData from ref

[gotexis]

Hi I went through the docs but didn't find an easy way. Is there a way to do this?

I would like to programmatically set country - when you click a button, set country to US / AU.

[mimi26]

@gotexis I just implemented something like this. My form has a country drop down and I wanted to set the country value on the phone input to whatever country the user chooses. I have a property in state for countryFormat, and I'm updating it in the onChange handler for the country dropdown. I have the phone input country prop value set to this.state.countryFormat. One gotcha I hit here was that you seem to have to omit the onlyCountries prop when you change the country value dynamically this way for some reason.

[bl00mber]

The input has a country prop. I guessing how this is not an easy way to change it :thinking:

[mimi26]

@bl00mber Is there a reason the onlyCountries prop won't dynamically update? I realized I can't use it if the input tries to guess other countries. I need both country and onlyCountries to update.

[bl00mber]

@mimi26 this functionality was never requested. Now when I look at the way how it may be implemented, I guess comparing these arrays which are passed to input may add excessive overload... I think I may want to add a method that should re-create country data when called from ref like phoneInputRef.current.recreateCountryData({onlyCountries... [optional parameters]})

(a note for me :laughing:)

[ionutmiftode]

@bl00mber do you plan to add this functionality in the next release?

[mimi26]

Just adding in case someone else has the issue, I was able to force an update by adding a key prop to the phoneInput component. It was a suggestion from a very smart colleague.

[apmeehan]

@mimi26 Devilishly simple and effective, thanks for that idea 👍