Fixing FormInputwithAddon with no click

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.3.1",
+	"version": "2.3.2",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

stories/atoms/icons/TablerIcon.tsx

@@ -24,7 +24,8 @@ export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttr
 
 const TablerIcon: React.FC<ITablerIconProps> = ({
 	icon,
-	className = "w-6 h-6 text-gray-600"
+	className = "w-6 h-6 text-gray-600",
+	...rest
 }: ITablerIconProps): JSX.Element | null => {
 	const [Icon, setIcon] = useState<ComponentType<any> | null>(
 		iconRegistry && icon ? (iconRegistry[icon] ?? null) : null
@@ -38,7 +39,7 @@ const TablerIcon: React.FC<ITablerIconProps> = ({
 
 	if (!Icon) return null;
 	return (
-		<i>
+		<i {...rest}>
 			<Icon className={className} />
 		</i>
 	);

stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
+import { action } from "@storybook/addon-actions";
+import FormInputWithAddons from "./FormInputWithAddons";
 
 const meta: Meta<typeof FormInputWithAddons> = {
 	title: "Design System/organisms/Form Input With Addons",
@@ -27,6 +28,19 @@ export const DefaultFormInputWithAddons: Story = {
 		trailIcon: { icon: "IconSearch" }
 	}
 };
+export const TrailIconWithOnClick: Story = {
+	args: {
+		id: "appSearch",
+		name: "appSearch",
+		type: "text",
+		placeholder: "Search...",
+		trailIcon: {
+			icon: "IconX",
+			onClick: action("trailIcon clicked")
+		}
+	}
+};
+
 export const FormInputWithAddonBTN: Story = {
 	args: {
 		id: "appSearch",

stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx

@@ -121,27 +121,52 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
 					}}
 				/>
 				{(trailLabel || trailIcon) && (
-					<label
-						ref={trailLabelRef}
-						htmlFor={id}
-						className={cn(
-							"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
-							labelClass
-						)}
-					>
-						{trailIcon && (
-							<span>
-								<DynamicIcon
-									{...{
-										...trailIcon,
-										className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
-										outline: iconOutlined
-									}}
-								/>
-							</span>
-						)}
-						{trailLabel && trailLabel}
-					</label>
+					trailIcon?.onClick ? (
+						<button
+							ref={trailLabelRef as unknown as React.RefObject<HTMLButtonElement>}
+							type="button"
+							onClick={(e) => { e.preventDefault(); trailIcon.onClick!(e as unknown as React.MouseEvent<HTMLElement>); }}
+							className={cn(
+								"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 bg-transparent border-0 p-0 cursor-pointer",
+								labelClass
+							)}
+						>
+							{trailIcon && (
+								<span>
+									<DynamicIcon
+										{...{
+											...trailIcon,
+											className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
+											outline: iconOutlined
+										}}
+									/>
+								</span>
+							)}
+							{trailLabel && trailLabel}
+						</button>
+					) : (
+						<label
+							ref={trailLabelRef}
+							htmlFor={id}
+							className={cn(
+								"right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
+								labelClass
+							)}
+						>
+							{trailIcon && (
+								<span>
+									<DynamicIcon
+										{...{
+											...trailIcon,
+											className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
+											outline: iconOutlined
+										}}
+									/>
+								</span>
+							)}
+							{trailLabel && trailLabel}
+						</label>
+					)
 				)}
 				{addonBTN && (
 					<div className="absolute top-0 bottom-0 right-0 flex items-center ">