Add flag update when phones changes through props

patw0929 · Feb 4, 2018 · 9d58356 · 9d58356
1 parent ad57239
commit 9d58356
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/__tests__/TelInput.test.js b/__tests__/TelInput.test.js
@@ -427,6 +427,19 @@ describe('TelInput', function () { // eslint-disable-line func-names
     });
 
     it('should change input value on value prop change', () => {
+      const subject = this.makeSubject();
+      const flagComponent = subject.find(FlagDropDown);
+
+      subject.setProps({ value: '+447598455159' });
+
+      expect(flagComponent.props().highlightedCountry).toBe(1);
+
+      subject.setProps({ value: '+1(201) 555-0129' });
+
+      expect(flagComponent.props().highlightedCountry).toBe(0);
+    });
+
+    it('should update country flag when value updates', () => {
       const subject = this.makeSubject();
       const inputComponent = subject.find(TelInput);
 

diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js
@@ -177,6 +177,12 @@ class IntlTelInputApp extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value) {
+      this.updateFlagFromNumber(this.props.value);
+    }
+  }
+
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     window.removeEventListener('scroll', this.handleWindowScroll);