fix: wrapped phone input with forwardRef

omeralpi · Feb 17, 2024 · 73abb92 · 73abb92
1 parent 39a9ad4
commit 73abb92
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/components/ui/phone-input.tsx b/components/ui/phone-input.tsx
@@ -30,17 +30,21 @@ const PhoneInputSimple = ({ className, children, ...props }: PhoneInputSimplePro
 );
 PhoneInputSimple.displayName = "PhoneInputSimple";
 
-type PhoneInputProps = React.ComponentProps<typeof RPNInput.default>;
-
-const PhoneInput = ({ className, children, ...props }: PhoneInputProps) => (
-  <RPNInput.default
-    className={cn("flex", className)}
-    placeholder={"Enter a phone number"}
-    flagComponent={FlagComponent}
-    countrySelectComponent={CountrySelect}
-    inputComponent={InputComponent}
-    {...props}
-  />
+type PhoneInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> &
+  RPNInput.Props<typeof RPNInput.default>;
+
+const PhoneInput = React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
+  ({ className, ...props }, ref) => (
+    <RPNInput.default
+      ref={ref}
+      className={cn("flex", className)}
+      placeholder={"Enter a phone number"}
+      flagComponent={FlagComponent}
+      countrySelectComponent={CountrySelect}
+      inputComponent={InputComponent}
+      {...props}
+    />
+  ),
 );
 
 PhoneInput.displayName = "PhoneInput";