react-intl-tel-input
react-intl-tel-input copied to clipboard
Setting the preferredCountries value with a function does not change the displayed flag
Expected Behavior
When I click on a button to change the preferredCountries attribute value to "tn" which refers to Tunisia for example, the displayed country should display the Tunisia flag.
Current Behavior
So here's logged results when I click on the checkState button, the testChangeDefaultCountryFlagsToDisplayInPhoneNumberInput button and then the checkState button:
Possible Solution
Steps to Reproduce
Code:
<IntlTelInput
fieldId="numTel"
fieldName="numTel"
type="number"
preferredCountries={
this.state
.defaultCountryFlagsToDisplayInPhoneNumberInput
}
containerClassName="intl-tel-input"
inputClassName="form-control"
// TODO: This should not be a fixed width as screen size may vary. Using 100% also cause the IntlTelInput to take-up all of the size of the card. When you have time fix this.
style={{ width: "955px" }}
value={this.state.numTel}
onPhoneNumberChange={this.onPhoneNumberChange}
onSelectFlag={this.onFlagSelected}
disabled={
this.state.isClientInformationFieldsDisabled
}
These are the two functions that get triggered when I click on the buttons below the input:
this.setState({
defaultCountryFlagsToDisplayInPhoneNumberInput: ["tn"],
});
}
testChangeDefaultCountryFlagsToDisplayInPhoneNumberInputCheckState() {
console.log("this.state.defaultCountryFlagsToDisplayInPhoneNumberInput");
console.log(this.state.defaultCountryFlagsToDisplayInPhoneNumberInput);
}
This is the default value:
defaultCountryFlagsToDisplayInPhoneNumberInput: ["fr"],
Environment
- Version:
- Browser:
Detailed Description
hi @patw0929 , I double check the current code and see that you only process the PreferredCountries
on componentDidMount(). So to fix this issue, we can simply adding a condition check in componentDidUpdate()
whether prop preferredCountries
is changed or not, then we can process preferred countries data again.
How do you think, @patw0929 ?
One more note:
The same issue may happen with onlyCountries
too, so we can add something like:
if onlyCountries
or preferredCountries
is changed, then processCountryData()
again.
I also have the same issue I have following code but still it shows all country flag instead of onlyCountries array I specified
<ReactIntlTelInput
containerClassName="intl-tel-input"
inputClassName="form-control"
ref={this.setInput.bind(this)}
onChange={this.onChange.bind(this)}
value={this.state.value}
autoHideDialCode={this.state.autoHideDialCode}
formatOnDisplay={this.state.formatOnDisplay}
inputProps={this.state.inputProps}
onlyCountries={this.state.onlyCountries}
preferredCountries={this.state.preferredCountries}
/>
I have ['in','us'] inside this.state.onlyCountries and ['in'] inside this.state.preferredCountries but there is effect in output of these two props.
What is wrong with it ? any help ?