From 882eb85a3397ab9e992551342fb6c2f29ece8125 Mon Sep 17 00:00:00 2001
From: Vibhor Phalke <vibgitcode27@gmail.com>
Date: Mon, 1 Sep 2025 20:08:57 +0530
Subject: [PATCH] =?UTF-8?q?fix(phone=20input):=20trigger=20validation=20an?=
 =?UTF-8?q?d=20formatting=20for=20prefill=20query=E2=80=A6=20(#23123)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(phone input): trigger validation and formatting for prefill query values

* fix: strengthen phone input sanitization to prevent edge cases

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
---
 .../components/phone-input/PhoneInput.tsx     | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/features/components/phone-input/PhoneInput.tsx b/packages/features/components/phone-input/PhoneInput.tsx
index 070eea48b2..644ef67cb8 100644
--- a/packages/features/components/phone-input/PhoneInput.tsx
+++ b/packages/features/components/phone-input/PhoneInput.tsx
@@ -31,6 +31,22 @@ function BasePhoneInput({
 }: PhoneInputProps) {
   const isPlatform = useIsPlatform();
 
+  // This is to trigger validation on prefill value changes
+  useEffect(() => {
+    if (!value) return;
+
+    const sanitized = value
+      .trim()
+      .replace(/[^\d+]/g, "")
+      .replace(/^\+?/, "+");
+
+    if (sanitized === "+" || sanitized === "") return;
+
+    if (value !== sanitized) {
+      onChange(sanitized);
+    }
+  }, []);
+
   if (!isPlatform) {
     return (
       <BasePhoneInputWeb name={name} className={className} onChange={onChange} value={value} {...rest} />
@@ -45,12 +61,12 @@ function BasePhoneInput({
       disableSearchIcon
       country={defaultCountry}
       inputProps={{
-        name: name,
+        name,
         required: rest.required,
         placeholder: rest.placeholder,
       }}
-      onChange={(value) => {
-        onChange(`+${value}`);
+      onChange={(val: string) => {
+        onChange(`+${val}`);
       }}
       containerClass={classNames(
         "hover:border-emphasis dark:focus:border-emphasis border-default !bg-default rounded-md border focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-default disabled:cursor-not-allowed",
@@ -84,6 +100,7 @@ function BasePhoneInputWeb({
   ...rest
 }: Omit<PhoneInputProps, "defaultCountry">) {
   const defaultCountry = useDefaultCountry();
+
   return (
     <PhoneInput
       {...rest}
@@ -92,12 +109,12 @@ function BasePhoneInputWeb({
       enableSearch
       disableSearchIcon
       inputProps={{
-        name: name,
+        name,
         required: rest.required,
         placeholder: rest.placeholder,
       }}
-      onChange={(value) => {
-        onChange(`+${value}`);
+      onChange={(val: string) => {
+        onChange(`+${val}`);
       }}
       containerClass={classNames(
         "hover:border-emphasis dark:focus:border-emphasis border-default !bg-default rounded-md border focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-default disabled:cursor-not-allowed",