From 8523aa6b22cfbe8db8b08a8fa7810406b8818f6f Mon Sep 17 00:00:00 2001
From: omeralpi <omeralpi@icloud.com>
Date: Tue, 20 Feb 2024 19:28:39 +0300
Subject: [PATCH] fix: onChange prop in PhoneInput component

---
 components/ui/phone-input.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/ui/phone-input.tsx b/components/ui/phone-input.tsx
index 2406554..db50b06 100644
--- a/components/ui/phone-input.tsx
+++ b/components/ui/phone-input.tsx
@@ -28,7 +28,7 @@ type PhoneInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChan
 const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> = React.forwardRef<
   React.ElementRef<typeof RPNInput.default>,
   PhoneInputProps
->(({ className, ...props }, ref) => (
+>(({ className, onChange, ...props }, ref) => (
   <RPNInput.default
     ref={ref}
     placeholder={"Enter a phone number"}
@@ -36,6 +36,16 @@ const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> = React.forwa
     flagComponent={FlagComponent}
     countrySelectComponent={CountrySelect}
     inputComponent={InputComponent}
+    /**
+     * Handles the onChange event.
+     *
+     * react-phone-number-input might trigger the onChange event as undefined
+     * when a valid phone number is not entered. To prevent this,
+     * the value is coerced to an empty string.
+     *
+     * @param {E164Number | undefined} value - The entered value
+     */
+    onChange={(value) => onChange(value || "")}
     {...props}
   />
 ));