From a65d7ec98f9560682571e3b740dc95cc076de793 Mon Sep 17 00:00:00 2001
From: Kamishetty Rishith <119791436+Rishith25@users.noreply.github.com>
Date: Tue, 5 Nov 2024 06:14:35 +0530
Subject: [PATCH] Adding of clear and cancel button in create preset form
 (#8921)

---
 src/components/CameraFeed/ConfigureCamera.tsx | 10 +++-
 .../Form/FormFields/TextFormField.tsx         | 47 ++++++++++++-------
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
index 03b627d48ce..c0cb19e6a23 100644
--- a/src/components/CameraFeed/ConfigureCamera.tsx
+++ b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -391,14 +391,22 @@ export default function ConfigureCamera(props: Props) {
                 >
                   <TextFormField
                     name="preset-name"
-                    className="py-4"
+                    className="w-full py-4"
                     value={presetName}
                     onChange={({ value }) => setPresetName(value)}
                     errorClassName="hidden"
                     placeholder={t("preset_name_placeholder")}
                     suggestions={presetNameSuggestions}
+                    clearable={true}
                   />
+
                   <div className="cui-form-button-group">
+                    <Cancel
+                      onClick={() => {
+                        setCreatePreset(undefined);
+                        setPresetName("");
+                      }}
+                    />
                     <Submit
                       onClick={async () => {
                         const { res } = await request(FeedRoutes.createPreset, {
diff --git a/src/components/Form/FormFields/TextFormField.tsx b/src/components/Form/FormFields/TextFormField.tsx
index a3663358a56..81e1edea9d0 100644
--- a/src/components/Form/FormFields/TextFormField.tsx
+++ b/src/components/Form/FormFields/TextFormField.tsx
@@ -24,6 +24,7 @@ export type TextFormFieldProps = FormFieldBaseProps<string> &
     trailingPadding?: string | undefined;
     leadingPadding?: string | undefined;
     suggestions?: string[];
+    clearable?: boolean | undefined;
   };
 
 const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
@@ -41,24 +42,36 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
   };
 
   let child = (
-    <input
-      {...props}
-      ref={ref as React.Ref<HTMLInputElement>}
-      id={field.id}
-      className={classNames(
-        "cui-input-base peer",
-        hasLeading && (props.leadingPadding || "pl-10"),
-        hasTrailing && (props.trailingPadding || "pr-10"),
-        field.error && "border-danger-500",
-        props.inputClassName,
+    <div className="relative">
+      <input
+        {...props}
+        ref={ref as React.Ref<HTMLInputElement>}
+        id={field.id}
+        className={classNames(
+          "cui-input-base peer",
+          hasLeading && (props.leadingPadding || "pl-10"),
+          hasTrailing && (props.trailingPadding || "pr-10"),
+          field.error && "border-danger-500",
+          props.inputClassName,
+        )}
+        disabled={field.disabled}
+        type={props.type === "password" ? getPasswordFieldType() : props.type}
+        name={field.name}
+        value={field.value}
+        required={field.required}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+      {props.clearable && field.value && (
+        <button
+          type="button"
+          className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"
+          onClick={() => field.handleChange("")}
+          aria-label="Clear input"
+        >
+          <CareIcon icon="l-times-circle" className="text-lg" />
+        </button>
       )}
-      disabled={field.disabled}
-      type={props.type === "password" ? getPasswordFieldType() : props.type}
-      name={field.name}
-      value={field.value}
-      required={field.required}
-      onChange={(e) => field.handleChange(e.target.value)}
-    />
+    </div>
   );
 
   if (props.type === "password") {