fix: input focus on click (#494)

nearform · Jun 11, 2024 · 5b77354 · 5b77354
1 parent 98f68d9
commit 5b77354
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 19 deletions.
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -107,7 +107,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const rightSideComponent = rightSideChild ?? <BsX strokeWidth={0.6} />
 
     return (
-      <div className={cn(formVariants({ variant }), formClassName)}>
+      <label className={cn(formVariants({ variant }), formClassName)}>
         <div className={cn(leftSideVariants(), leftSideClassName)}>
           {leftSideComponent}
         </div>
@@ -121,7 +121,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <button type="button" onClick={onClear} className={rightSideVariants()}>
           {rightSideComponent}
         </button>
-      </div>
+      </label>
     )
   }
 )

diff --git a/src/components/Password/index.tsx b/src/components/Password/index.tsx
@@ -43,12 +43,10 @@ const Password = React.forwardRef<HTMLInputElement, PasswordProps>(
   ) => {
     const [isMaskOn, setIsMaskOn] = useState(true)
 
-    const onToggleMask = () => {
-      setIsMaskOn(isMaskOn => !isMaskOn)
-    }
+    const onToggleMask = () => setIsMaskOn(isMaskOn => !isMaskOn)
 
     return (
-      <div className={cn(formVariants({ variant }), formClassName)}>
+      <label className={cn(formVariants({ variant }), formClassName)}>
         <input
           type={isMaskOn ? 'password' : 'text'}
           className={cn(passwordVariants({ variant }), className)}
@@ -65,7 +63,7 @@ const Password = React.forwardRef<HTMLInputElement, PasswordProps>(
             {isMaskOn ? <BsEye /> : <BsEyeSlash />}
           </button>
         )}
-      </div>
+      </label>
     )
   }
 )

diff --git a/stories/Input/Docs.mdx b/stories/Input/Docs.mdx
@@ -38,7 +38,7 @@ This component accepts all attributes for the input component of type text, with
 import React from 'react'
 import { cn } from '@/lib/utils'
 import { cva } from 'class-variance-authority'
-import { ClearButton, User, SearchOutline } from '@/assets'
+import { BsX, BsPersonFill, BsSearch } from '@/assets'
 
 const leftSideVariants = cva(['flex', 'items-center', 'text-inherit'])
 
@@ -119,8 +119,8 @@ interface InputProps extends React.HTMLProps<HTMLInputElement> {
 
 const convertTypeToComponent = {
   left: {
-    text: <User />,
-    search: <SearchOutline />
+    text: <BsPersonFill />,
+    search: <BsSearch />
   }
 }
 
@@ -141,10 +141,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const leftSideComponent =
       leftSideChild ?? convertTypeToComponent.left[`${type}`]
-    const rightSideComponent = rightSideChild ?? <ClearButton />
+    const rightSideComponent = rightSideChild ?? <BsX strokeWidth={0.6} />
 
     return (
-      <form className={cn(formVariants({ variant }), formClassName)}>
+      <label className={cn(formVariants({ variant }), formClassName)}>
         <div className={cn(leftSideVariants(), leftSideClassName)}>
           {leftSideComponent}
         </div>
@@ -158,12 +158,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <button type="button" onClick={onClear} className={rightSideVariants()}>
           {rightSideComponent}
         </button>
-      </form>
+      </label>
     )
   }
 )
 
-export { Input, InputProps }
+export { Input, InputProps, formVariants }
 ```
 
 ## Usage

diff --git a/stories/Password/Docs.mdx b/stories/Password/Docs.mdx
@@ -76,12 +76,10 @@ const Password = React.forwardRef<HTMLInputElement, PasswordProps>(
   ) => {
     const [isMaskOn, setIsMaskOn] = useState(true)
 
-    const onToggleMask = () => {
-      setIsMaskOn(isMaskOn => !isMaskOn)
-    }
+    const onToggleMask = () => setIsMaskOn(isMaskOn => !isMaskOn)
 
     return (
-      <div className={cn(formVariants({ variant }), formClassName)}>
+      <label className={cn(formVariants({ variant }), formClassName)}>
         <input
           type={isMaskOn ? 'password' : 'text'}
           className={cn(passwordVariants({ variant }), className)}
@@ -98,7 +96,7 @@ const Password = React.forwardRef<HTMLInputElement, PasswordProps>(
             {isMaskOn ? <BsEye /> : <BsEyeSlash />}
           </button>
         )}
-      </div>
+      </label>
     )
   }
 )