Merge pull request patw0929#204 from adrienharnay/patch-1

Handle placeholder and customPlaceholder change
andrewsantarin · Apr 16, 2018 · 74d2c12 · 74d2c12
2 parents 7a092d4 + 16de58c
commit 74d2c12
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 20 deletions.
diff --git 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
@@ -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),