From 9103d738745e533b42f9bf3489ed0010c098c6b4 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Wed, 26 Feb 2025 17:06:01 +0530
Subject: [PATCH] touched

---
 .../photos/src/components/DeleteAccount.tsx   | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/web/apps/photos/src/components/DeleteAccount.tsx b/web/apps/photos/src/components/DeleteAccount.tsx
index b7f59e9207..f165c589a4 100644
--- a/web/apps/photos/src/components/DeleteAccount.tsx
+++ b/web/apps/photos/src/components/DeleteAccount.tsx
@@ -51,7 +51,7 @@ export const DeleteAccount: React.FC<DeleteAccountProps> = ({
         { reason: string; feedback: string } | undefined
     >(undefined);
 
-    const { values, errors, handleChange, handleSubmit } = useFormik({
+    const { values, touched, errors, handleChange, handleSubmit } = useFormik({
         initialValues: { reason: "", feedback: "" },
         validate: ({ reason, feedback }) => {
             if (!reason) return { reason: t("required") };
@@ -149,7 +149,7 @@ export const DeleteAccount: React.FC<DeleteAccountProps> = ({
                             selected={values.reason}
                             onSelect={handleChange("reason")}
                         />
-                        {errors.reason && (
+                        {touched.reason && errors.reason && (
                             <Typography
                                 variant="small"
                                 sx={{ px: 1, color: "critical.main" }}
@@ -161,7 +161,9 @@ export const DeleteAccount: React.FC<DeleteAccountProps> = ({
                     <FeedbackInput
                         value={values.feedback}
                         onChange={handleChange("feedback")}
-                        errorMessage={errors.feedback}
+                        errorMessage={
+                            touched.feedback ? errors.feedback : undefined
+                        }
                     />
                     <ConfirmationCheckboxInput
                         checked={acceptDataDeletion}
@@ -212,7 +214,7 @@ const deleteReasonOptions = (): DropdownOption<DeleteReason>[] =>
 
 interface FeedbackInputProps {
     value: string;
-    errorMessage?: string;
+    errorMessage?: string | undefined;
     onChange: (value: string) => void;
 }
 
@@ -242,9 +244,14 @@ const FeedbackInput: React.FC<FeedbackInputProps> = ({
                 },
             }}
         />
-        <Typography variant="small" sx={{ px: "8px", color: "critical.main" }}>
-            {errorMessage}
-        </Typography>
+        {errorMessage && (
+            <Typography
+                variant="small"
+                sx={{ px: "8px", color: "critical.main" }}
+            >
+                {errorMessage}
+            </Typography>
+        )}
     </Stack>
 );