fix pointer event set to none for input span and absolute error posit…

…ion for form label
dev-KPI · Feb 4, 2024 · efe00ff · efe00ff
1 parent 1b2f77a
commit efe00ff
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
@@ -114,6 +114,7 @@ const FormControl = React.forwardRef<
           : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
+      className="relative"
       id={formItemId}
       ref={ref}
       {...props}
@@ -152,7 +153,7 @@ const FormMessage = React.forwardRef<
 
   return (
     <p
-      className={cn('!mt-1 ml-4 text-xs text-bright-red', className)}
+      className={cn('!mt-1 ml-4 text-xs text-bright-red absolute', className)}
       id={formMessageId}
       ref={ref}
       {...props}

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -20,7 +20,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               type={type}
               {...props}
             />
-            <span className="absolute z-0 top-1/2 peer-focus:top-[0.375rem] left-4 -translate-y-1/2 peer-focus:translate-y-0 peer-focus:text-[0.6875rem] peer-focus:leading-[0.8125rem] text-base-gray-5 transition-all peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:top-[0.375rem] peer-[:not(:placeholder-shown)]:text-[0.6875rem] peer-[:not(:placeholder-shown)]:leading-[0.8125rem];">
+            <span className="absolute z-0 top-1/2 pointer-events-none peer-focus:top-[0.375rem] left-4 -translate-y-1/2 peer-focus:translate-y-0 peer-focus:text-[0.6875rem] peer-focus:leading-[0.8125rem] text-base-gray-5 transition-all peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:top-[0.375rem] peer-[:not(:placeholder-shown)]:text-[0.6875rem] peer-[:not(:placeholder-shown)]:leading-[0.8125rem];">
               {placeholder}
             </span>
           </div>