Updates

components/lib/form/Input/index.tsx

@@ -75,6 +75,10 @@ export type InputProps<KeyType extends string> = DetailedHTMLProps<
         info?: string | ReactNode;
         ready?: boolean;
         validity?: TWUISelectValidityObject;
+        clearInputProps?: React.DetailedHTMLProps<
+            React.HTMLAttributes<HTMLDivElement>,
+            HTMLDivElement
+        >;
     };
 
 let refreshes = 0;
@@ -114,6 +118,7 @@ export default function Input<KeyType extends string>(
         info,
         changeHandler,
         validity: existingValidity,
+        clearInputProps,
         ...props
     } = inputProps;
 
@@ -256,7 +261,7 @@ export default function Input<KeyType extends string>(
             }
             {...props}
             className={twMerge(
-                "w-full outline-none bg-transparent",
+                "w-full outline-none bg-transparent grow",
                 "twui-textarea",
                 props.className
             )}
@@ -285,7 +290,7 @@ export default function Input<KeyType extends string>(
                 "w-full outline-none bg-transparent border-none",
                 "hover:border-none hover:outline-none focus:border-none focus:outline-none",
                 "dark:bg-transparent dark:outline-none dark:border-none",
-                "p-0",
+                "p-0 grow",
                 "twui-input",
                 props.className
             )}
@@ -301,6 +306,7 @@ export default function Input<KeyType extends string>(
             onChange={handleValueChange}
             type={inputType}
             defaultValue={defaultInitialValue}
+            autoComplete={autoComplete}
             value={props.value ? getFinalValue(props.value) : undefined}
         />
     );
@@ -381,10 +387,12 @@ export default function Input<KeyType extends string>(
                 {props.type == "search" || props.readOnly ? null : (
                     <div
                         title="Clear Input Field"
+                        {...clearInputProps}
                         className={twMerge(
-                            "p-1 -my-2 -mx-1 opacity-0 cursor-pointer",
+                            "p-1 -my-2 -mx-1 opacity-0 cursor-pointer w-7 h-7",
                             "bg-background-light dark:bg-background-dark",
-                            "twui-clear-input-field-button"
+                            "twui-clear-input-field-button",
+                            clearInputProps?.className
                         )}
                         onClick={(e) => {
                             e.preventDefault();
@@ -397,9 +405,10 @@ export default function Input<KeyType extends string>(
                             }
 
                             updateValue("");
+                            clearInputProps?.onClick?.(e);
                         }}
                     >
-                        <X size={15} />
+                        <X className="w-full h-full" />
                     </div>
                 )}