fix(phone input): trigger validation and formatting for prefill query… (calcom#23123)

* 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>

Author: 3 people

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",