Fix the erasing issue of the initial value (GH-27)

Author: ArtyomVancyan

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.2",
+  "version": "0.1.3",
   "name": "antd-phone-input",
   "description": "Advanced Phone Number Input for Ant Design",
   "keywords": [

src/index.tsx

@@ -23,15 +23,15 @@ const parsePhoneNumber: ParsePhoneNumber = (value, data, formattedNumber) => {
 	const countryCodePattern = /\+\d+/;
 	const areaCodePattern = /\((\d+)\)/;
 
-	/** Parse the matching partials of the phone number by predefined regex patterns */
+	/** Parses the matching partials of the phone number by predefined regex patterns */
 	const countryCodeMatch = formattedNumber ? (formattedNumber.match(countryCodePattern) || []) : [];
 	const areaCodeMatch = formattedNumber ? (formattedNumber.match(areaCodePattern) || []) : [];
 
-	/** Convert the parsed values of the country and area codes to integers if values present */
+	/** Converts the parsed values of the country and area codes to integers if values present */
 	const countryCode = countryCodeMatch.length > 0 ? parseInt(countryCodeMatch[0]) : null;
 	const areaCode = areaCodeMatch.length > 1 ? parseInt(areaCodeMatch[1]) : null;
 
-	/** Parse the phone number by removing the country and area codes from the formatted value */
+	/** Parses the phone number by removing the country and area codes from the formatted value */
 	const phoneNumberPattern = new RegExp(`^${countryCode}${(areaCode || "")}(\\d+)`);
 	const phoneNumberMatch = value ? (value.match(phoneNumberPattern) || []) : [];
 	const phoneNumber = phoneNumberMatch.length > 1 ? phoneNumberMatch[1] : null;
@@ -76,7 +76,7 @@ const PhoneInput = ({
 		const code = metadata.isoCode as ISO2Code;
 
 		if (code !== currentCode) {
-			/** Clear phone number when the country is selected manually */
+			/** Clears phone number when the country is selected manually */
 			handleChange({...metadata, areaCode: null, phoneNumber: null}, event);
 			setCurrentCode(code);
 			return;
@@ -87,6 +87,8 @@ const PhoneInput = ({
 
 	const onMount: ReactPhoneOnMount = (rawValue, {countryCode, ...event}, formattedNumber) => {
 		const metadata = parsePhoneNumber(rawValue, {countryCode}, formattedNumber);
+		/** Initiates the current country code with the code of initial value */
+		setCurrentCode(metadata.isoCode as ISO2Code);
 		/** Initializes the existing value */
 		handleChange(metadata, event);
 		handleMount(metadata);

tests/common.test.tsx

@@ -84,4 +84,16 @@ describe("Checks the basic rendering and functionality", () => {
 		</Form>);
 		await userEvent.click(screen.getByTestId("button"));
 	})
+
+	it("Checks form with initial value", async () => {
+		render(<Form initialValues={{phone: {countryCode: 1, areaCode: 702}}}>
+			<FormItem name="phone">
+				<PhoneInput/>
+			</FormItem>
+			<Button data-testid="button" htmlType="submit">Submit</Button>
+		</Form>);
+		const input = screen.getByDisplayValue("+1 (702)");
+		await userEvent.type(input, "1234567");
+		assert(input.getAttribute("value") === "+1 (702) 123 4567");
+	})
 })