Skip to content

Commit

Permalink
Merge pull request #1 from siyahulhaq/fix/input-field-not-updating-wh…
Browse files Browse the repository at this point in the history 
…en-value-changes

fixed:
  • Loading branch information
@siyahulhaq
siyahulhaq authored Aug 20, 2022
2 parents ccd16fc + d4cf8c7 commit e3f258f
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions lib/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,12 @@ export default class PhoneInput extends PureComponent {
}
}

componentDidUpdate(prevProps) {
if (prevProps.value !== this.props.value) {
this.setState({number: this.props.value});
}
}

getCountryCode = () => {
return this.state.countryCode;
};
Expand Down

2 comments on commit e3f258f

@rares-lupascu
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed worked ... i've changed the code a bit to handle parsing of full numbers if countryCode prop is being passed

componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      this.setState({number: this.props.value ? this.props.value.replace('+' + this.state.code, '') : this.props.value});
    }
  }

@rares-lupascu
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is my latest patch package

diff --git a/node_modules/react-native-phone-number-input/lib/index.js b/node_modules/react-native-phone-number-input/lib/index.js
index b89c388..0a1e7bb 100644
--- a/node_modules/react-native-phone-number-input/lib/index.js
+++ b/node_modules/react-native-phone-number-input/lib/index.js
@@ -48,6 +48,20 @@ export default class PhoneInput extends PureComponent {
     }
   }
 
+  async componentDidUpdate(prevProps) {
+    let code;
+    if (prevProps.defaultCode !== this.props.defaultCode) {
+      code = await getCallingCode(this.props.defaultCode);
+      this.setState({ code, countryCode: this.props.defaultCode });
+    }
+    if (prevProps.defaultValue !== this.props.defaultValue) {
+      if (!code) {
+        code = await getCallingCode(this.props.defaultCode);
+      }
+      this.setState({number: code ? this.props.value.replace('+' + code, '') : this.props.value});
+    }
+  }
+
   getCountryCode = () => {
     return this.state.countryCode;
   };
@@ -92,23 +106,24 @@ export default class PhoneInput extends PureComponent {
   };
 
   onChangeText = (text) => {
-    this.setState({ number: text });
+    const {number} = this.getNumberAfterPossiblyEliminatingZero(text)
+    this.setState({ number });
     const { onChangeText, onChangeFormattedText } = this.props;
     if (onChangeText) {
-      onChangeText(text);
+      onChangeText(number);
     }
     if (onChangeFormattedText) {
       const { code } = this.state;
       if (code) {
-        onChangeFormattedText(text.length > 0 ? `+${code}${text}` : text);
+        onChangeFormattedText(number.length > 0 ? `+${code}${number}` : number);
       } else {
-        onChangeFormattedText(text);
+        onChangeFormattedText(number);
       }
     }
   };
 
-  getNumberAfterPossiblyEliminatingZero() {
-    let { number, code } = this.state;
+  getNumberAfterPossiblyEliminatingZero(number) {
+    let { code } = this.state;
     if (number.length > 0 && number.startsWith("0")) {
       number = number.substr(1);
       return { number, formattedNumber: code ? `+${code}${number}` : number };

Please sign in to comment.