From 1494e53c7e6dbd34182ed6029eefb3589c5804d0 Mon Sep 17 00:00:00 2001
From: lb1192176991-lab <lb1192176991-lab@users.noreply.github.com>
Date: Wed, 29 Jul 2026 03:59:36 +0800
Subject: [PATCH 1/3] fix: persist Select dropdown value and reset form after
 successful contribution submission
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug 1 — Select dropdown value not persisted:
The shadcn Select component's value prop received undefined initially,
causing uncontrolled/controlled mismatch. The onChange synthetic event
wrapper also introduced unnecessary indirection. Fixed by:
- Passing value={formData[...]?.value ?? ''} so the Select is always controlled
- Calling setFormData directly in onValueChange instead of routing through
  the generic handleChange helper with a synthetic event

Bug 2 — Form not resetting after submit:
Native HTMLFormElement.reset() does not clear controlled components like
shadcn Select. Fixed by:
- Replacing formRef.reset() with a formKey counter that increments on
  successful submission, forcing the FormGenerator to remount with clean
  state
- Removing the 3-second setTimeout delay before reset
---
 src/components/tasks/form-generator.tsx | 9 ++-------
 src/components/tasks/task-fields.tsx    | 6 +++---
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/tasks/form-generator.tsx b/src/components/tasks/form-generator.tsx
index 74b50b9..3220c9f 100644
--- a/src/components/tasks/form-generator.tsx
+++ b/src/components/tasks/form-generator.tsx
@@ -157,13 +157,8 @@ export const FormGenerator = (
                 <Select
                     required={field.required}
                     onValueChange={(selectedOption) =>
-                        handleChange({
-                            target: {
-                                name: field.label,
-                                value: selectedOption,
-                            },
-                        } as React.ChangeEvent<HTMLInputElement>)}
-                    value={formData[field.label]?.value}
+                        setFormData((prev: { [key: string]: any }) => ({ ...prev, [field.label]: { value: selectedOption } }))}
+                    value={formData[field.label]?.value ?? ""}
                 >
                     <SelectTrigger>
                         <SelectValue placeholder="Select an option" />
diff --git a/src/components/tasks/task-fields.tsx b/src/components/tasks/task-fields.tsx
index 5b2bf3b..b4a2e0b 100644
--- a/src/components/tasks/task-fields.tsx
+++ b/src/components/tasks/task-fields.tsx
@@ -26,6 +26,7 @@ export function TaskFields({ task }: { task: Task }) {
     const [isFirstSurvey, setIsFirstSurvey] = useState(true);
     const [accepted, setAccepted] = useState(false);
     const [file, setFile] = useState<{ filePath: string; fileUrl: string } | null>(null);
+    const [formKey, setFormKey] = useState(0);
     const formRef = useRef<HTMLFormElement | null>(null);
     const pathname = usePathname();
     const { toast } = useToast()
@@ -72,12 +73,10 @@ export function TaskFields({ task }: { task: Task }) {
     }, [user]);
 
     const reset = () => {
-        if (formRef.current) {
-            formRef.current.reset();
-        }
         setFormData({});
         setMessage(undefined);
         setFile(null);
+        setFormKey((k) => k + 1);
         if (task.type === TaskType.DATALABELLING) {
             fetchRandomFile();
         } else if(task.type === TaskType.SURVEY) {
@@ -104,6 +103,7 @@ export function TaskFields({ task }: { task: Task }) {
             <div className="flex-[0.7] min-w-80 flex flex-col justify-between p-8 pb-2 px-2 rounded-lg">
                 <h3 className="text-center font-semibold text-lg text-primary">Task</h3>
                 <FormGenerator
+                    key={formKey}
                     ref={formRef}
                     fields={task.fields}
                     handleSubmit={handleSubmit}

From 0297f0dcc3cb9b44ff33ae0941068d79b485fafe Mon Sep 17 00:00:00 2001
From: lb1192176991-lab <lb1192176991-lab@users.noreply.github.com>
Date: Fri, 7 Aug 2026 01:37:36 +0800
Subject: [PATCH 2/3] fix: revert Select empty-value regression and reset
 accepted checkbox after submission

- Revert form-generator.tsx Select changes that allowed empty values for required fields (removes ?? ''  fallback on value prop)
- Add setAccepted(false) to task-fields.tsx reset() so submit button re-disables after form reset
---
 src/components/tasks/form-generator.tsx | 9 +++++++--
 src/components/tasks/task-fields.tsx    | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/form-generator.tsx b/src/components/tasks/form-generator.tsx
index 3220c9f..5a1b3ec 100644
--- a/src/components/tasks/form-generator.tsx
+++ b/src/components/tasks/form-generator.tsx
@@ -157,8 +157,13 @@ export const FormGenerator = (
                 <Select
                     required={field.required}
                     onValueChange={(selectedOption) =>
-                        setFormData((prev: { [key: string]: any }) => ({ ...prev, [field.label]: { value: selectedOption } }))}
-                    value={formData[field.label]?.value ?? ""}
+                        handleChange({
+                            target: {
+                                name: field.label,
+                                value: selectedOption,
+                            },
+                        } as React.ChangeEvent<HTMLInputElement>)
+                    value={formData[field.label]?.value}
                 >
                     <SelectTrigger>
                         <SelectValue placeholder="Select an option" />
diff --git a/src/components/tasks/task-fields.tsx b/src/components/tasks/task-fields.tsx
index b4a2e0b..d9110cd 100644
--- a/src/components/tasks/task-fields.tsx
+++ b/src/components/tasks/task-fields.tsx
@@ -76,6 +76,7 @@ export function TaskFields({ task }: { task: Task }) {
         setFormData({});
         setMessage(undefined);
         setFile(null);
+        setAccepted(false);
         setFormKey((k) => k + 1);
         if (task.type === TaskType.DATALABELLING) {
             fetchRandomFile();

From 9ec928cc2e24c104a3921d82fd5c7d95726746e6 Mon Sep 17 00:00:00 2001
From: Mayssa Ghanmi <107711995+MAY55A@users.noreply.github.com>
Date: Thu, 6 Aug 2026 20:51:22 +0100
Subject: [PATCH 3/3] fix: add missing closing bracket

---
 src/components/tasks/form-generator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/form-generator.tsx b/src/components/tasks/form-generator.tsx
index 5a1b3ec..0ec5f1e 100644
--- a/src/components/tasks/form-generator.tsx
+++ b/src/components/tasks/form-generator.tsx
@@ -162,7 +162,7 @@ export const FormGenerator = (
                                 name: field.label,
                                 value: selectedOption,
                             },
-                        } as React.ChangeEvent<HTMLInputElement>)
+                        } as React.ChangeEvent<HTMLInputElement>)}
                     value={formData[field.label]?.value}
                 >
                     <SelectTrigger>
@@ -191,4 +191,4 @@ export const FormGenerator = (
             {children}
         </form>
     );
-};
\ No newline at end of file
+};