diff --git a/__tests__/TelInput.test.js b/__tests__/TelInput.test.js index 9eaabd234..e8521c78f 100644 --- a/__tests__/TelInput.test.js +++ b/__tests__/TelInput.test.js @@ -478,6 +478,25 @@ describe('TelInput', function () { // eslint-disable-line func-names expect(subject.find(TelInput).props().placeholder).toBe('Your phone'); }); + + it('should change input placeholder on customPlaceholder prop change', () => { + const subject = this.makeSubject(); + + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + window.eval(getScript().text); + + subject.setProps({ customPlaceholder: () => 'Phone number' }); + subject.update(); + + expect(subject.find(TelInput).props().placeholder).toBe('Phone number'); + + subject.setProps({ customPlaceholder: () => 'Your phone' }); + subject.update(); + + expect(subject.find(TelInput).props().placeholder).toBe('Your phone'); + }); }); describe('uncontrolled', () => { diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js index 1f395bc7b..862bb7050 100644 --- a/src/components/IntlTelInputApp.js +++ b/src/components/IntlTelInputApp.js @@ -103,8 +103,6 @@ class IntlTelInputApp extends Component { } componentDidMount() { - this.initialPlaceholder = this.props.placeholder; - this.autoHideDialCode = this.props.autoHideDialCode; this.allowDropdown = this.props.allowDropdown; this.nationalMode = this.props.nationalMode; @@ -166,10 +164,11 @@ class IntlTelInputApp extends Component { }); } - if (this.props.placeholder !== nextProps.placeholder) { - this.setState({ - placeholder: nextProps.placeholder, - }); + if ( + typeof nextProps.customPlaceholder === 'function' && + this.props.customPlaceholder !== nextProps.customPlaceholder + ) { + this.updatePlaceholder(nextProps); } } @@ -293,7 +292,7 @@ class IntlTelInputApp extends Component { dialCode, }, () => { // and the input's placeholder - this.updatePlaceholder(); + this.updatePlaceholder(this.props); // update the active list item this.wrapperClass.active = false; @@ -788,21 +787,17 @@ class IntlTelInputApp extends Component { // update the input placeholder to an // example number from the currently selected country - updatePlaceholder() { - if (this.initialPlaceholder) { - this.setState({ - placeholder: this.initialPlaceholder, - }); - } else if (window.intlTelInputUtils && this.props.autoPlaceholder && this.selectedCountryData) { - const numberType = window.intlTelInputUtils.numberType[this.props.numberType]; + updatePlaceholder(props = this.props) { + if (window.intlTelInputUtils && props.autoPlaceholder && this.selectedCountryData) { + const numberType = window.intlTelInputUtils.numberType[props.numberType]; let placeholder = this.selectedCountryData.iso2 ? window.intlTelInputUtils.getExampleNumber(this.selectedCountryData.iso2, this.nationalMode, numberType) : ''; - placeholder = this.beforeSetNumber(placeholder); + placeholder = this.beforeSetNumber(placeholder, props); - if (typeof this.props.customPlaceholder === 'function') { - placeholder = this.props.customPlaceholder(placeholder, this.selectedCountryData); + if (typeof props.customPlaceholder === 'function') { + placeholder = props.customPlaceholder(placeholder, this.selectedCountryData); } this.setState({ @@ -961,8 +956,8 @@ class IntlTelInputApp extends Component { } // remove the dial code if separateDialCode is enabled - beforeSetNumber(number) { - if (this.props.separateDialCode) { + beforeSetNumber(number, props = this.props) { + if (props.separateDialCode) { let dialCode = this.getDialCode(number); if (dialCode) { @@ -1160,7 +1155,11 @@ class IntlTelInputApp extends Component { fieldName={ this.props.fieldName } fieldId={ this.props.fieldId } value={ value } - placeholder={ this.state.placeholder } + placeholder={ + this.props.placeholder !== undefined + ? this.props.placeholder + : this.state.placeholder + } autoFocus={ this.props.autoFocus } autoComplete={ this.props.autoComplete } inputProps={ this.props.telInputProps } @@ -1179,6 +1178,7 @@ IntlTelInputApp.propTypes = { countriesData: PropTypes.arrayOf(PropTypes.array), allowDropdown: PropTypes.bool, autoHideDialCode: PropTypes.bool, + // eslint-disable-next-line react/no-unused-prop-types autoPlaceholder: PropTypes.bool, customPlaceholder: PropTypes.func, excludeCountries: PropTypes.arrayOf(PropTypes.string), @@ -1187,6 +1187,7 @@ IntlTelInputApp.propTypes = { defaultCountry: PropTypes.string, geoIpLookup: PropTypes.func, nationalMode: PropTypes.bool, + // eslint-disable-next-line react/no-unused-prop-types numberType: PropTypes.string, noCountryDataHandler: PropTypes.func, onlyCountries: PropTypes.arrayOf(PropTypes.string),