fix: wrapped phone input with forwardRef

omeralpi · Feb 17, 2024 · 16d4228 · 16d4228
1 parent 39a9ad4
commit 16d4228
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 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";

diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "build": "contentlayer build && next build",
     "start": "next start",
     "lint": "biome check . && biome format .",
-    "lint-fix": "biome check . --apply && biome format . --write"
+    "lint-fix": "biome check . --apply && biome format . --write",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.3",