fix: added implementation to block user from typing letters in input …

…type tel
shadcn-ui · Apr 21, 2024 · 94e9baf · 94e9baf
1 parent 9aaaf42
commit 94e9baf
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/apps/www/registry/default/ui/input.tsx b/apps/www/registry/default/ui/input.tsx
@@ -7,6 +7,20 @@ export interface InputProps
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
+    const validateInput = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      const isKeycodeInRange =
+        event.keyCode >= 65 &&
+        event.keyCode <= 90 &&
+        !event.metaKey &&
+        !event.shiftKey &&
+        !event.altKey &&
+        !event.ctrlKey
+      const regex = /[a-zA-Z]/i
+      isKeycodeInRange &&
+        type === "tel" &&
+        regex.test(event.key) &&
+        event.preventDefault()
+    }
     return (
       <input
         type={type}
@@ -16,6 +30,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         )}
         ref={ref}
         {...props}
+        onKeyDown={(e) => {
+          validateInput(e)
+          props.onKeyDown?.(e)
+        }}
       />
     )
   }

diff --git a/apps/www/registry/new-york/ui/input.tsx b/apps/www/registry/new-york/ui/input.tsx
@@ -7,6 +7,20 @@ export interface InputProps
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
+    const validateInput = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      const isKeycodeInRange =
+        event.keyCode >= 65 &&
+        event.keyCode <= 90 &&
+        !event.metaKey &&
+        !event.shiftKey &&
+        !event.altKey &&
+        !event.ctrlKey
+      const regex = /[a-zA-Z]/i
+      isKeycodeInRange &&
+        type === "tel" &&
+        regex.test(event.key) &&
+        event.preventDefault()
+    }
     return (
       <input
         type={type}
@@ -16,6 +30,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         )}
         ref={ref}
         {...props}
+        onKeyDown={(e) => {
+          validateInput(e)
+          props.onKeyDown?.(e)
+        }}
       />
     )
   }