Setting the preferredCountries value with a function does not change the displayed flag

[AGSTRANGER]

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

[paulnguyen-mn]

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.

[ankitseepossible]

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 ?