From 44710de5f242452aec088d2a6fd9bed74564a390 Mon Sep 17 00:00:00 2001
From: sylwia-werner <werner.sylwia38@gmail.com>
Date: Wed, 12 Nov 2025 13:58:42 +0100
Subject: [PATCH 1/2] fix: add clickable icon button to input component

---
 src/components/atoms/Input/Input.tsx          | 23 +++++++++++++++----
 .../molecules/NavbarSearch/NavbarSearch.tsx   | 11 +++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx
index 92268a21..48aa9730 100644
--- a/src/components/atoms/Input/Input.tsx
+++ b/src/components/atoms/Input/Input.tsx
@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils"
 import { CloseIcon } from "@/icons"
 import { useEffect, useState } from "react"
 import { EyeMini, EyeSlashMini } from "@medusajs/icons"
+import { IconButton } from "../IconButton/IconButton"
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string
@@ -11,6 +12,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   clearable?: boolean
   error?: boolean
   changeValue?: (value: string) => void
+  onIconClick?: () => void
+  iconAriaLabel?: string
 }
 
 export function Input({
@@ -20,6 +23,8 @@ export function Input({
   className,
   error,
   changeValue,
+  onIconClick,
+  iconAriaLabel,
   ...props
 }: InputProps) {
   const [showPassword, setShowPassword] = useState(false)
@@ -47,10 +52,20 @@ export function Input({
   }
 
   return (
-    <label className="label-md">
-      {label}
+    <div className="flex flex-col">
+      <label className="label-md">{label}</label>
       <div className="relative mt-2">
-        {icon && (
+        {icon && onIconClick && (
+          <button
+            onClick={onIconClick}
+            className="flex items-center justify-center rounded-sm transition-all duration-300 ease-out button-transparent h-[32px] w-[32px] absolute top-[8px] left-[8px]"
+            aria-label={iconAriaLabel}
+          >
+            {icon}
+          </button>
+        )}
+
+        {icon && !onIconClick && (
           <span className="absolute top-0 left-[16px] h-full flex items-center">
             {icon}
           </span>
@@ -87,6 +102,6 @@ export function Input({
           </button>
         )}
       </div>
-    </label>
+    </div>
   )
 }
diff --git a/src/components/molecules/NavbarSearch/NavbarSearch.tsx b/src/components/molecules/NavbarSearch/NavbarSearch.tsx
index 9ee6dcbb..ba30aab0 100644
--- a/src/components/molecules/NavbarSearch/NavbarSearch.tsx
+++ b/src/components/molecules/NavbarSearch/NavbarSearch.tsx
@@ -11,8 +11,7 @@ export const NavbarSearch = () => {
 
   const [search, setSearch] = useState(searchParams.get("query") || "")
 
-  const submitHandler = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
+  const handleSearch = () => {
     if (search) {
       redirect(`/categories?query=${search}`)
     } else {
@@ -20,13 +19,21 @@ export const NavbarSearch = () => {
     }
   }
 
+  const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    handleSearch()
+  }
+
   return (
     <form className="flex items-center" method="POST" onSubmit={submitHandler}>
       <Input
         icon={<SearchIcon />}
+        onIconClick={handleSearch}
+        iconAriaLabel="Search"
         placeholder="Search product"
         value={search}
         changeValue={setSearch}
+        type="search"
       />
       <input type="submit" className="hidden" />
     </form>

From 3da317ed15a8d90b113a4a0af488917a0305fd33 Mon Sep 17 00:00:00 2001
From: sylwia-werner <werner.sylwia38@gmail.com>
Date: Mon, 17 Nov 2025 12:07:59 +0100
Subject: [PATCH 2/2] refactor: remove unused import

---
 src/components/atoms/Input/Input.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx
index 48aa9730..5bf68cfe 100644
--- a/src/components/atoms/Input/Input.tsx
+++ b/src/components/atoms/Input/Input.tsx
@@ -4,7 +4,6 @@ import { cn } from "@/lib/utils"
 import { CloseIcon } from "@/icons"
 import { useEffect, useState } from "react"
 import { EyeMini, EyeSlashMini } from "@medusajs/icons"
-import { IconButton } from "../IconButton/IconButton"
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string