fix: wrapped phone input with forwardRef

omeralpi · Feb 17, 2024 · 3487fc6 · 3487fc6
1 parent 39a9ad4
commit 3487fc6
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/components/ui/phone-input.tsx b/components/ui/phone-input.tsx
@@ -30,18 +30,20 @@ const PhoneInputSimple = ({ className, children, ...props }: PhoneInputSimplePro
 );
 PhoneInputSimple.displayName = "PhoneInputSimple";
 
-type PhoneInputProps = React.ComponentProps<typeof RPNInput.default>;
-
-const PhoneInput = ({ className, children, ...props }: PhoneInputProps) => (
+const PhoneInput = React.forwardRef<
+  React.ElementRef<typeof RPNInput.default>,
+  RPNInput.Props<typeof RPNInput.default>
+>(({ 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";