From 2f85b8ad6bd3f0d4cf690952fe30ac10c23a64a8 Mon Sep 17 00:00:00 2001
From: Anmol Mahajan <anmolmahajan242@gmail.com>
Date: Sat, 1 Jul 2023 23:12:18 +0530
Subject: [PATCH] fix: phone number disappearing issue (#9811)

Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
---
 packages/ui/form/PhoneInput.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index d29df98a33..8cf27ba764 100644
--- a/packages/ui/form/PhoneInput.tsx
+++ b/packages/ui/form/PhoneInput.tsx
@@ -1,5 +1,5 @@
 import { isSupportedCountry } from "libphonenumber-js";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";
 
@@ -18,11 +18,20 @@ export type PhoneInputProps = {
 };
 
 function BasePhoneInput({ name, className = "", onChange, ...rest }: PhoneInputProps) {
+  useEffect(() => {
+    if (!rest.value) {
+      return;
+    }
+    const formattedValue = rest.value.trim().replace(/^\+?/, "+");
+    onChange(formattedValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const defaultCountry = useDefaultCountry();
   return (
     <PhoneInput
       {...rest}
-      country={defaultCountry}
+      country={rest.value ? undefined : defaultCountry}
       enableSearch
       disableSearchIcon
       inputProps={{