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

@@ -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>

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}

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;