Update placeholder when receiving new placeholder prop

patw0929 · Mar 11, 2018 · 4e9bcaf · 4e9bcaf
1 parent 7cee4a3
commit 4e9bcaf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/__tests__/TelInput.test.js b/__tests__/TelInput.test.js
@@ -464,6 +464,20 @@ describe('TelInput', function () { // eslint-disable-line func-names
 
       expect(subject.state().value).toBe('+');
     });
+
+    it('should change input placeholder on placeholder prop change', () => {
+      const subject = this.makeSubject();
+
+      subject.setProps({ placeholder: 'Phone number' });
+      subject.update();
+
+      expect(subject.find(TelInput).props().placeholder).toBe('Phone number');
+
+      subject.setProps({ placeholder: '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
@@ -165,6 +165,12 @@ class IntlTelInputApp extends Component {
         disabled: nextProps.disabled,
       });
     }
+
+    if (this.props.placeholder !== nextProps.placeholder) {
+      this.setState({
+        placeholder: nextProps.placeholder,
+      });
+    }
   }
 
   componentWillUpdate(nextProps, nextState) {