From feeec4052e0a8cfd8413cd6b8f7887928fc504ef Mon Sep 17 00:00:00 2001
From: Ahsan Khan <m.ahsankhan26@hotmail.com>
Date: Wed, 18 Sep 2024 13:26:24 +0500
Subject: [PATCH 1/4] add 'onRightIconClick' prop on TextInput

---
 packages/ui/src/components/TextInput/TextInput.tsx | 4 +++-
 packages/ui/src/components/TextInput/theme.ts      | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/TextInput/TextInput.tsx b/packages/ui/src/components/TextInput/TextInput.tsx
index b651c852d..1e8156e5c 100644
--- a/packages/ui/src/components/TextInput/TextInput.tsx
+++ b/packages/ui/src/components/TextInput/TextInput.tsx
@@ -46,6 +46,7 @@ export interface TextInputProps extends Omit<ComponentProps<"input">, "ref" | "c
   color?: DynamicStringEnumKeysOf<FlowbiteTextInputColors>;
   helperText?: ReactNode;
   icon?: FC<ComponentProps<"svg">>;
+  onRightIconClick?: () => void;
   rightIcon?: FC<ComponentProps<"svg">>;
   shadow?: boolean;
   sizing?: DynamicStringEnumKeysOf<FlowbiteTextInputSizes>;
@@ -60,6 +61,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       color = "gray",
       helperText,
       icon: Icon,
+      onRightIconClick,
       rightIcon: RightIcon,
       shadow,
       sizing = "md",
@@ -82,7 +84,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
               </div>
             )}
             {RightIcon && (
-              <div data-testid="right-icon" className={theme.field.rightIcon.base}>
+              <div data-testid="right-icon" className={theme.field.rightIcon.base} onClick={onRightIconClick}>
                 <RightIcon className={theme.field.rightIcon.svg} />
               </div>
             )}
diff --git a/packages/ui/src/components/TextInput/theme.ts b/packages/ui/src/components/TextInput/theme.ts
index 15b9f7003..aa5c41100 100644
--- a/packages/ui/src/components/TextInput/theme.ts
+++ b/packages/ui/src/components/TextInput/theme.ts
@@ -12,7 +12,7 @@ export const textInputTheme: FlowbiteTextInputTheme = createTheme({
       svg: "h-5 w-5 text-gray-500 dark:text-gray-400",
     },
     rightIcon: {
-      base: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3",
+      base: "absolute inset-y-0 right-0 flex items-center pr-3",
       svg: "h-5 w-5 text-gray-500 dark:text-gray-400",
     },
     input: {

From 5c1ffa765e9a67363015249b538288f515f9a0df Mon Sep 17 00:00:00 2001
From: Ahsan Khan <m.ahsankhan26@hotmail.com>
Date: Mon, 23 Sep 2024 12:58:03 +0500
Subject: [PATCH 2/4] conditionally add 'pointer-events-none' class on right
 icon

---
 packages/ui/src/components/TextInput/TextInput.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/TextInput/TextInput.tsx b/packages/ui/src/components/TextInput/TextInput.tsx
index 1e8156e5c..2d35321ee 100644
--- a/packages/ui/src/components/TextInput/TextInput.tsx
+++ b/packages/ui/src/components/TextInput/TextInput.tsx
@@ -84,7 +84,11 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
               </div>
             )}
             {RightIcon && (
-              <div data-testid="right-icon" className={theme.field.rightIcon.base} onClick={onRightIconClick}>
+              <div
+                data-testid="right-icon"
+                className={`${theme.field.rightIcon.base} ${!onRightIconClick ? "pointer-events-none" : ""}`}
+                onClick={onRightIconClick}
+              >
                 <RightIcon className={theme.field.rightIcon.svg} />
               </div>
             )}

From 1965831d7aaecf1936dcf6b66b9900d31814d2b8 Mon Sep 17 00:00:00 2001
From: Ahsan Khan <m.ahsankhan26@hotmail.com>
Date: Tue, 1 Oct 2024 11:53:43 +0500
Subject: [PATCH 3/4] pass event on right icon click

---
 packages/ui/src/components/TextInput/TextInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/TextInput/TextInput.tsx b/packages/ui/src/components/TextInput/TextInput.tsx
index 2d35321ee..565a194e7 100644
--- a/packages/ui/src/components/TextInput/TextInput.tsx
+++ b/packages/ui/src/components/TextInput/TextInput.tsx
@@ -46,7 +46,7 @@ export interface TextInputProps extends Omit<ComponentProps<"input">, "ref" | "c
   color?: DynamicStringEnumKeysOf<FlowbiteTextInputColors>;
   helperText?: ReactNode;
   icon?: FC<ComponentProps<"svg">>;
-  onRightIconClick?: () => void;
+  onRightIconClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   rightIcon?: FC<ComponentProps<"svg">>;
   shadow?: boolean;
   sizing?: DynamicStringEnumKeysOf<FlowbiteTextInputSizes>;
@@ -87,7 +87,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
               <div
                 data-testid="right-icon"
                 className={`${theme.field.rightIcon.base} ${!onRightIconClick ? "pointer-events-none" : ""}`}
-                onClick={onRightIconClick}
+                onClick={(e) => onRightIconClick?.(e)}
               >
                 <RightIcon className={theme.field.rightIcon.svg} />
               </div>

From 061dc172e917a22ce64b598e935e8050a06f4809 Mon Sep 17 00:00:00 2001
From: Ahsan Khan <m.ahsankhan26@hotmail.com>
Date: Wed, 2 Oct 2024 12:26:38 +0500
Subject: [PATCH 4/4] replaced inline function in 'onClick' with direct
 reference to 'onRightIconClick'

---
 packages/ui/src/components/TextInput/TextInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/TextInput/TextInput.tsx b/packages/ui/src/components/TextInput/TextInput.tsx
index 565a194e7..7bfe5b3f7 100644
--- a/packages/ui/src/components/TextInput/TextInput.tsx
+++ b/packages/ui/src/components/TextInput/TextInput.tsx
@@ -87,7 +87,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
               <div
                 data-testid="right-icon"
                 className={`${theme.field.rightIcon.base} ${!onRightIconClick ? "pointer-events-none" : ""}`}
-                onClick={(e) => onRightIconClick?.(e)}
+                onClick={onRightIconClick}
               >
                 <RightIcon className={theme.field.rightIcon.svg} />
               </div>