From a5066716e319da73cf7aa7f2cd03068cfb57f8d5 Mon Sep 17 00:00:00 2001
From: Shiva Gupta <shivascalerite@gmail.com>
Date: Sun, 14 Dec 2025 07:18:10 +0530
Subject: [PATCH] fix(tasks): reset Add Task dialog form fields on close

- Added form reset logic in useEffect when dialog closes.
- Clears description, priority, project, due, tags, and tagInput states.
- Ensures clean form state when reopening Add Task dialog after cancel.
- Fix col-span-3 styling by wrapping Input components in div
- Add "None" option and rename priority labels for clarity (High/Medium/Low)

Fixes: #277
---
 .../HomeComponents/Tasks/AddTaskDialog.tsx    | 59 ++++++++++---------
 .../components/HomeComponents/Tasks/Tasks.tsx |  8 +++
 .../Tasks/__tests__/AddTaskDialog.test.tsx    |  9 ++-
 .../Tasks/__tests__/Tasks.test.tsx            | 50 ++++++++++++++++
 4 files changed, 95 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
index ff2d47ef..596b5d4b 100644
--- a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
@@ -80,26 +80,27 @@ export const AddTaskdialog = ({
             <Label htmlFor="description" className="text-right">
               Description
             </Label>
-            <Input
-              id="description"
-              name="description"
-              type="text"
-              value={newTask.description}
-              onChange={(e) =>
-                setNewTask({
-                  ...newTask,
-                  description: e.target.value,
-                })
-              }
-              required
-              className="col-span-3"
-            />
+            <div className="col-span-3">
+              <Input
+                id="description"
+                name="description"
+                type="text"
+                value={newTask.description}
+                onChange={(e) =>
+                  setNewTask({
+                    ...newTask,
+                    description: e.target.value,
+                  })
+                }
+                required
+              />
+            </div>
           </div>
           <div className="grid grid-cols-4 items-center gap-4">
             <Label htmlFor="priority" className="text-right">
               Priority
             </Label>
-            <div className="col-span-1 flex items-center">
+            <div className="col-span-3 flex items-center">
               <select
                 id="priority"
                 name="priority"
@@ -112,9 +113,10 @@ export const AddTaskdialog = ({
                 }
                 className="border rounded-md px-2 py-1 w-full bg-white text-black dark:bg-black dark:text-white transition-colors"
               >
-                <option value="H">H</option>
-                <option value="M">M</option>
-                <option value="L">L</option>
+                <option value="">None</option>
+                <option value="H">High (H)</option>
+                <option value="M">Medium (M)</option>
+                <option value="L">Low (L)</option>
               </select>
             </div>
           </div>
@@ -195,16 +197,17 @@ export const AddTaskdialog = ({
             <Label htmlFor="description" className="text-right">
               Tags
             </Label>
-            <Input
-              id="tags"
-              name="tags"
-              placeholder="Add a tag"
-              value={tagInput}
-              onChange={(e) => setTagInput(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && handleAddTag()}
-              required
-              className="col-span-3"
-            />
+            <div className="col-span-3">
+              <Input
+                id="tags"
+                name="tags"
+                placeholder="Add a tag"
+                value={tagInput}
+                onChange={(e) => setTagInput(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleAddTag()}
+                required
+              />
+            </div>
           </div>
 
           <div className="mt-2">
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index 5043fba0..5f37044e 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -243,6 +243,14 @@ export const Tasks = (
   useEffect(() => {
     if (!isAddTaskOpen) {
       setIsCreatingNewProject(false);
+      setTagInput('');
+      setNewTask({
+        description: '',
+        priority: '',
+        project: '',
+        due: '',
+        tags: [],
+      });
     }
   }, [isAddTaskOpen]);
 
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
index 9e114f07..7b1c125f 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
@@ -258,9 +258,12 @@ describe('AddTaskDialog Component', () => {
 
     const prioritySelect = screen.getByLabelText(/priority/i);
 
-    expect(prioritySelect).toContainHTML('<option value="H">H</option>');
-    expect(prioritySelect).toContainHTML('<option value="M">M</option>');
-    expect(prioritySelect).toContainHTML('<option value="L">L</option>');
+    expect(prioritySelect).toContainHTML('<option value="">None</option>');
+    expect(prioritySelect).toContainHTML('<option value="H">High (H)</option>');
+    expect(prioritySelect).toContainHTML(
+      '<option value="M">Medium (M)</option>'
+    );
+    expect(prioritySelect).toContainHTML('<option value="L">Low (L)</option>');
   });
 
   test('shows new project input when creating new project', () => {
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
index a5f510dc..55233b9c 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
@@ -180,6 +180,56 @@ describe('Tasks Component', () => {
     expect(dropdown).toHaveValue('10');
   });
 
+  test('reset form fields when Add Task dialog is closed via cancel button', async () => {
+    render(<Tasks {...mockProps} />);
+
+    expect(await screen.findByText('Task 1')).toBeInTheDocument();
+
+    const addTaskButton = screen.getByRole('button', { name: /add task/i });
+    fireEvent.click(addTaskButton);
+
+    const descriptionInput = screen.getByLabelText(/description/i);
+    fireEvent.change(descriptionInput, {
+      target: { value: 'New Task Description' },
+    });
+
+    expect(descriptionInput).toHaveValue('New Task Description');
+
+    const priorityInput = screen.getByLabelText(/priority/i);
+    fireEvent.change(priorityInput, { target: { value: 'L' } });
+
+    expect(priorityInput).toHaveValue('L');
+
+    const projectSelect = await screen.findByTestId('project-select');
+    fireEvent.change(projectSelect, { target: { value: 'ProjectA' } });
+
+    expect(projectSelect).toHaveValue('ProjectA');
+
+    const tagsInput = screen.getByPlaceholderText('Add a tag');
+    fireEvent.change(tagsInput, { target: { value: 'urgent' } });
+    fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
+
+    expect(screen.getByText('urgent')).toBeInTheDocument();
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Add a new task')).not.toBeInTheDocument();
+    });
+
+    fireEvent.click(addTaskButton);
+
+    const descriptionInputAfter = screen.getByLabelText(/description/i);
+    const priorityInputAfter = screen.getByLabelText(/priority/i);
+    const projectSelectAfter = await screen.findByTestId('project-select');
+
+    expect(descriptionInputAfter).toHaveValue('');
+    expect(priorityInputAfter).toHaveValue('');
+    expect(projectSelectAfter).toHaveValue('');
+    expect(screen.queryByText('urgent')).not.toBeInTheDocument();
+  });
+
   test('loads "tasksPerPage" from localStorage on initial render', async () => {
     localStorageMock.setItem('mockHashedKey', '20');