From a43fa13b1169750131a5501b78bf809cc753e73a Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 27 Feb 2024 03:48:58 +0530
Subject: [PATCH] fix: infinite rendering in event setup tab (#13877)

---
 apps/web/components/eventtype/EventSetupTab.tsx |  2 +-
 packages/ui/form/PhoneInput.tsx                 | 15 ++++-----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index d5df1e89b7..56fb4ab934 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -318,7 +318,7 @@ export const EventSetupTab = (
                         />
                       </div>
                       <ErrorMessage
-                        errors={formMethods.formState.errors.locations?.[index]}
+                        errors={formMethods.formState.errors?.locations?.[index]}
                         name={eventLocationType.defaultValueVariable}
                         className="text-error my-1 ml-6 text-sm"
                         as="div"
diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index eaf36e3089..9d95c803a4 100644
--- a/packages/ui/form/PhoneInput.tsx
+++ b/packages/ui/form/PhoneInput.tsx
@@ -17,21 +17,14 @@ export type PhoneInputProps = {
   onChange: (value: string) => void;
 };
 
-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
-  }, []);
-
+function BasePhoneInput({ name, className = "", onChange, value, ...rest }: PhoneInputProps) {
   const defaultCountry = useDefaultCountry();
+
   return (
     <PhoneInput
       {...rest}
-      country={rest.value ? undefined : defaultCountry}
+      value={value ? value.trim().replace(/^\+?/, "+") : undefined}
+      country={value ? undefined : defaultCountry}
       enableSearch
       disableSearchIcon
       inputProps={{