From 82d7a3db924a68719f2aa87d892d6d2bb423a6cc Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Fri, 22 Sep 2023 23:15:14 +0000
Subject: [PATCH] fix: The clickable area of the 'x' in add guests section is
 not user friendly (#11434)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 packages/features/form-builder/Components.tsx    | 12 +++++-------
 packages/ui/components/form/inputs/TextField.tsx |  7 ++++++-
 packages/ui/components/form/inputs/types.d.ts    |  1 +
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 6fde7cc172..da955e1cd9 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -255,16 +255,14 @@ export const Components: Record<FieldType, Component> = {
                       placeholder={placeholder}
                       label={<></>}
                       required
+                      onClickAddon={() => {
+                        value.splice(index, 1);
+                        setValue(value);
+                      }}
                       addOnSuffix={
                         !readOnly ? (
                           <Tooltip content="Remove email">
-                            <button
-                              className="m-1 disabled:hover:cursor-not-allowed"
-                              type="button"
-                              onClick={() => {
-                                value.splice(index, 1);
-                                setValue(value);
-                              }}>
+                            <button className="m-1" type="button">
                               <X width={12} className="text-default" />
                             </button>
                           </Tooltip>
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index e393c58cae..fdf32e4604 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -31,13 +31,16 @@ type AddonProps = {
   isFilled?: boolean;
   className?: string;
   error?: boolean;
+  onClickAddon?: () => void;
 };
 
-const Addon = ({ isFilled, children, className, error }: AddonProps) => (
+const Addon = ({ isFilled, children, className, error, onClickAddon }: AddonProps) => (
   <div
+    onClick={onClickAddon && onClickAddon}
     className={classNames(
       "addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default h-9 border px-3",
       isFilled && "bg-subtle",
+      onClickAddon && "cursor-pointer disabled:hover:cursor-not-allowed",
       className
     )}>
     <div
@@ -75,6 +78,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
     containerClassName,
     readOnly,
     showAsteriskIndicator,
+    onClickAddon,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     t: __t,
     ...passThrough
@@ -133,6 +137,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
           />
           {addOnSuffix && (
             <Addon
+              onClickAddon={onClickAddon}
               isFilled={addOnFilled}
               className={classNames("ltr:rounded-r-md rtl:rounded-l-md", addOnClassname)}>
               {addOnSuffix}
diff --git a/packages/ui/components/form/inputs/types.d.ts b/packages/ui/components/form/inputs/types.d.ts
index 55545c20a8..1e058b0df0 100644
--- a/packages/ui/components/form/inputs/types.d.ts
+++ b/packages/ui/components/form/inputs/types.d.ts
@@ -17,6 +17,7 @@ export type InputFieldProps = {
   containerClassName?: string;
   showAsteriskIndicator?: boolean;
   t?: (key: string) => string;
+  onClickAddon?: () => void;
 } & React.ComponentProps<typeof Input> & {
     labelProps?: React.ComponentProps<typeof Label>;
     labelClassName?: string;