Alignment of clear button in preset form

Rishith25 · Oct 28, 2024 · 9a0236c · 9a0236c
1 parent 50fa2c8
commit 9a0236c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -398,16 +398,8 @@ export default function ConfigureCamera(props: Props) {
                       errorClassName="hidden"
                       placeholder={t("preset_name_placeholder")}
                       suggestions={presetNameSuggestions}
+                      isClear={true}
                     />
-                    {presetName && (
-                      <button
-                        type="button"
-                        className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"
-                        onClick={() => setPresetName("")}
-                      >
-                        <CareIcon icon="l-times-circle" className="text-lg" />
-                      </button>
-                    )}
                   </div>
 
                   <div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">

diff --git 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[];
+    isClear?: boolean;
   };
 
 const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
@@ -35,30 +36,47 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
   const hasTrailing = !!(trailing || trailingFocused);
   const hasIcon = hasLeading || hasTrailing;
   const [showPassword, setShowPassword] = useState(false);
+  const isClear = props.isClear || false;
 
   const getPasswordFieldType = () => {
     return showPassword ? "text" : "password";
   };
 
+  const handleClear = () => {
+    field.handleChange("");
+  };
+
   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)}
+      />
+      {isClear && field.value && (
+        <button
+          type="button"
+          className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"
+          onClick={handleClear}
+          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") {