From d255e2626123cd5a657369d399a605d43b5b803e Mon Sep 17 00:00:00 2001
From: Shiva Gupta <shivascalerite@gmail.com>
Date: Tue, 30 Dec 2025 22:46:40 +0530
Subject: [PATCH] feat(tags): implement tags dropdown in Add/Edit Task dialogs

- Replace text input with Select dropdown for tag selection
- Add "Create new tag" option in dropdown
- Display selected tags as removable badges
- Add uniqueTags, isCreatingNewTag, setIsCreatingNewTag props
- Add data-testid to Priority, Tags, Recur SelectTriggers

Tests:
- Update Select component mocks for testing
- Rewrite tag tests to use dropdown selection
- Add tests for dropdown selection and tag removal

Fixes: #210
---
 .../HomeComponents/Tasks/AddTaskDialog.tsx    | 102 +++++++---
 .../HomeComponents/Tasks/TaskDialog.tsx       | 185 +++++++++++-------
 .../components/HomeComponents/Tasks/Tasks.tsx |  14 +-
 .../Tasks/__tests__/AddTaskDialog.test.tsx    | 100 +++++++---
 .../Tasks/__tests__/TaskDialog.test.tsx       |  26 +--
 .../Tasks/__tests__/Tasks.test.tsx            |  77 +++-----
 .../Tasks/__tests__/tasks-utils.test.ts       |  33 ++++
 .../HomeComponents/Tasks/tasks-utils.ts       |  11 ++
 frontend/src/components/utils/types.ts        |   8 +-
 9 files changed, 362 insertions(+), 194 deletions(-)

diff --git a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
index 1b60ba10..9d299938 100644
--- a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
@@ -24,6 +24,7 @@ import {
 } from '@/components/ui/select';
 import { AddTaskDialogProps } from '@/components/utils/types';
 import { format } from 'date-fns';
+import { processTagInput } from './tasks-utils';
 
 export const AddTaskdialog = ({
   isOpen,
@@ -36,6 +37,9 @@ export const AddTaskdialog = ({
   isCreatingNewProject,
   setIsCreatingNewProject,
   uniqueProjects = [],
+  isCreatingNewTag,
+  setIsCreatingNewTag,
+  uniqueTags = [],
   allTasks = [],
 }: AddTaskDialogProps) => {
   const [annotationInput, setAnnotationInput] = useState('');
@@ -102,13 +106,6 @@ export const AddTaskdialog = ({
     });
   };
 
-  const handleAddTag = () => {
-    if (tagInput && !newTask.tags.includes(tagInput, 0)) {
-      setNewTask({ ...newTask, tags: [...newTask.tags, tagInput] });
-      setTagInput('');
-    }
-  };
-
   const handleRemoveTag = (tagToRemove: string) => {
     setNewTask({
       ...newTask,
@@ -194,6 +191,7 @@ export const AddTaskdialog = ({
             </Label>
             <div className="col-span-3 space-y-2">
               <Select
+                data-testid="project-select"
                 value={
                   isCreatingNewProject ? '__CREATE_NEW__' : newTask.project
                 }
@@ -207,7 +205,7 @@ export const AddTaskdialog = ({
                   }
                 }}
               >
-                <SelectTrigger id="project" data-testid="project-select">
+                <SelectTrigger id="project">
                   <SelectValue
                     placeholder={
                       uniqueProjects.length
@@ -373,24 +371,84 @@ export const AddTaskdialog = ({
               </select>
             </div>
           </div>
-          <div className="grid grid-cols-8 items-center gap-4">
-            <Label htmlFor="tags" className="text-right col-span-2">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="tags" className="text-right">
               Tags
             </Label>
-            <div className="col-span-6">
-              <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-6"
-              />
+            <div className="col-span-3 space-y-2">
+              <Select
+                data-testid="tags-select"
+                value={isCreatingNewTag ? '__CREATE_NEW__' : '__SELECT__'}
+                onValueChange={(value) => {
+                  if (value === '__CREATE_NEW__') {
+                    setIsCreatingNewTag(true);
+                  } else if (value !== '__SELECT__') {
+                    if (!newTask.tags.includes(value)) {
+                      setNewTask({
+                        ...newTask,
+                        tags: [...newTask.tags, value],
+                      });
+                    }
+                  }
+                }}
+              >
+                <SelectTrigger id="tags">
+                  <SelectValue
+                    placeholder={
+                      uniqueTags.length ? 'Select a tag' : 'No tags yet'
+                    }
+                  >
+                    {isCreatingNewTag
+                      ? tagInput
+                        ? `New Tag: ${tagInput}`
+                        : '+ Create new tag…'
+                      : 'Select a tag'}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent
+                  onWheel={(e) => e.stopPropagation()}
+                  onKeyDown={(e) => e.stopPropagation()}
+                  className="max-h-60 overflow-y-auto"
+                >
+                  <SelectItem value="__CREATE_NEW__">
+                    + Create new tag…
+                  </SelectItem>
+                  {uniqueTags.map((tag: string) => {
+                    const isSelected = newTask.tags.includes(tag);
+                    return (
+                      <SelectItem key={tag} value={tag} disabled={isSelected}>
+                        {tag}
+                      </SelectItem>
+                    );
+                  })}
+                </SelectContent>
+              </Select>
+              {isCreatingNewTag && (
+                <Input
+                  id="tag-name"
+                  placeholder="New tag name"
+                  value={tagInput}
+                  autoFocus
+                  onChange={(e) => setTagInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    const newTag = processTagInput(
+                      e.key,
+                      tagInput,
+                      newTask.tags
+                    );
+                    if (newTag) {
+                      setNewTask({
+                        ...newTask,
+                        tags: [...newTask.tags, newTag],
+                      });
+                      setTagInput('');
+                      setIsCreatingNewTag(false);
+                    }
+                  }}
+                />
+              )}
             </div>
           </div>
-
           <div className="mt-2">
             {newTask.tags.length > 0 && (
               <div className="grid grid-cols-4 items-center">
diff --git a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
index d2e5770e..d4b7fbf9 100644
--- a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
@@ -33,7 +33,7 @@ import {
   XIcon,
 } from 'lucide-react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { formattedDate, handleCopy } from './tasks-utils';
+import { formattedDate, handleCopy, processTagInput } from './tasks-utils';
 
 export const TaskDialog = ({
   index,
@@ -47,9 +47,12 @@ export const TaskDialog = ({
   editState,
   onUpdateState,
   allTasks,
+  uniqueProjects,
   isCreatingNewProject,
   setIsCreatingNewProject,
-  uniqueProjects,
+  uniqueTags,
+  isCreatingNewTag,
+  setIsCreatingNewTag,
   onSaveDescription,
   onSaveTags,
   onSavePriority,
@@ -781,6 +784,7 @@ export const TaskDialog = ({
                     {editState.isEditingPriority ? (
                       <div className="flex items-center">
                         <Select
+                          data-testid="priority-select"
                           value={editState.editedPriority}
                           onValueChange={(value) =>
                             onUpdateState({
@@ -860,6 +864,7 @@ export const TaskDialog = ({
                       <>
                         <div className="col-span-3 space-y-2 w-[300px]">
                           <Select
+                            data-testid="project-select"
                             value={
                               isCreatingNewProject
                                 ? '__CREATE_NEW__'
@@ -878,10 +883,7 @@ export const TaskDialog = ({
                               }
                             }}
                           >
-                            <SelectTrigger
-                              id="project"
-                              data-testid="project-select"
-                            >
+                            <SelectTrigger id="project">
                               <SelectValue
                                 placeholder={
                                   uniqueProjects.length
@@ -988,44 +990,64 @@ export const TaskDialog = ({
                   <TableCell>Tags:</TableCell>
                   <TableCell>
                     {editState.isEditingTags ? (
-                      <div>
-                        <div className="flex items-center w-full">
-                          <Input
-                            type="text"
-                            value={editState.editTagInput}
-                            onChange={(e) => {
-                              // For allowing only alphanumeric characters
-                              if (e.target.value.length > 1) {
-                                /^[a-zA-Z0-9]*$/.test(e.target.value.trim())
-                                  ? onUpdateState({
-                                      editTagInput: e.target.value.trim(),
-                                    })
-                                  : '';
-                              } else {
-                                /^[a-zA-Z]*$/.test(e.target.value.trim())
-                                  ? onUpdateState({
-                                      editTagInput: e.target.value.trim(),
-                                    })
-                                  : '';
-                              }
-                            }}
-                            placeholder="Add a tag (press enter to add)"
-                            className="flex-grow mr-2"
-                            onKeyDown={(e) => {
-                              if (
-                                e.key === 'Enter' &&
-                                editState.editTagInput.trim()
-                              ) {
-                                onUpdateState({
-                                  editedTags: [
-                                    ...editState.editedTags,
-                                    editState.editTagInput.trim(),
-                                  ],
-                                  editTagInput: '',
-                                });
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                          <Select
+                            data-testid="tags-select"
+                            value={
+                              isCreatingNewTag ? '__CREATE_NEW__' : '__SELECT__'
+                            }
+                            onValueChange={(value) => {
+                              if (value === '__CREATE_NEW__') {
+                                setIsCreatingNewTag(true);
+                              } else if (value !== '__SELECT__') {
+                                if (!editState.editedTags.includes(value)) {
+                                  onUpdateState({
+                                    editedTags: [
+                                      ...editState.editedTags,
+                                      value,
+                                    ],
+                                  });
+                                }
+                                setIsCreatingNewTag(false);
                               }
                             }}
-                          />
+                          >
+                            <SelectTrigger
+                              key={editState.editTagInput}
+                              className="flex-1"
+                            >
+                              <SelectValue placeholder="Select a tag">
+                                {isCreatingNewTag
+                                  ? editState.editTagInput
+                                    ? `New Tag: ${editState.editTagInput}`
+                                    : '+ Create new tag…'
+                                  : 'Select a tag'}
+                              </SelectValue>
+                            </SelectTrigger>
+                            <SelectContent
+                              onWheel={(e) => e.stopPropagation()}
+                              onKeyDown={(e) => e.stopPropagation()}
+                              className="max-h-60 overflow-y-auto"
+                            >
+                              <SelectItem value="__CREATE_NEW__">
+                                + Create new tag…
+                              </SelectItem>
+                              {uniqueTags.map((tag) => {
+                                const isSelected =
+                                  editState.editedTags.includes(tag);
+                                return (
+                                  <SelectItem
+                                    key={tag}
+                                    value={tag}
+                                    disabled={isSelected}
+                                  >
+                                    {tag}
+                                  </SelectItem>
+                                );
+                              })}
+                            </SelectContent>
+                          </Select>
                           <Button
                             variant="ghost"
                             size="icon"
@@ -1036,6 +1058,7 @@ export const TaskDialog = ({
                                 isEditingTags: false,
                                 editTagInput: '',
                               });
+                              setIsCreatingNewTag(false);
                             }}
                           >
                             <CheckIcon className="h-4 w-4 text-green-500" />
@@ -1043,46 +1066,65 @@ export const TaskDialog = ({
                           <Button
                             variant="ghost"
                             size="icon"
-                            aria-label="Cancel editing tags"
+                            aria-label="Cancel"
                             onClick={() => {
                               onUpdateState({
                                 isEditingTags: false,
                                 editedTags: task.tags || [],
                                 editTagInput: '',
                               });
+                              setIsCreatingNewTag(false);
                             }}
                           >
                             <XIcon className="h-4 w-4 text-red-500" />
                           </Button>
                         </div>
-                        <div className="mt-2">
-                          {editState.editedTags != null &&
-                            editState.editedTags.length > 0 && (
-                              <div>
-                                <div className="flex flex-wrap gap-2 col-span-3">
-                                  {editState.editedTags.map((tag, index) => (
-                                    <Badge key={index}>
-                                      <span>{tag}</span>
-                                      <button
-                                        type="button"
-                                        className="ml-2 text-red-500"
-                                        onClick={() =>
-                                          onUpdateState({
-                                            editedTags:
-                                              editState.editedTags.filter(
-                                                (t) => t !== tag
-                                              ),
-                                          })
-                                        }
-                                      >
-                                        ✖
-                                      </button>
-                                    </Badge>
-                                  ))}
-                                </div>
-                              </div>
-                            )}
-                        </div>
+                        {isCreatingNewTag && (
+                          <Input
+                            placeholder="New tag name"
+                            value={editState.editTagInput}
+                            autoFocus
+                            onChange={(e) =>
+                              onUpdateState({ editTagInput: e.target.value })
+                            }
+                            onKeyDown={(e) => {
+                              const newTag = processTagInput(
+                                e.key,
+                                editState.editTagInput,
+                                editState.editedTags
+                              );
+                              if (newTag) {
+                                onUpdateState({
+                                  editedTags: [...editState.editedTags, newTag],
+                                  editTagInput: '',
+                                });
+                                setIsCreatingNewTag(false);
+                              }
+                            }}
+                          />
+                        )}
+                        {editState.editedTags.length > 0 && (
+                          <div className="flex flex-wrap gap-2">
+                            {editState.editedTags.map((tag, index) => (
+                              <Badge key={index}>
+                                <span>{tag}</span>
+                                <button
+                                  type="button"
+                                  className="ml-2 text-red-500"
+                                  onClick={() =>
+                                    onUpdateState({
+                                      editedTags: editState.editedTags.filter(
+                                        (t) => t !== tag
+                                      ),
+                                    })
+                                  }
+                                >
+                                  ✖
+                                </button>
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
                       </div>
                     ) : (
                       <div className="flex items-center flex-wrap">
@@ -1209,6 +1251,7 @@ export const TaskDialog = ({
                     {editState.isEditingRecur ? (
                       <div className="flex items-center gap-2">
                         <Select
+                          data-testid="recur-select"
                           value={editState.editedRecur || 'none'}
                           onValueChange={(value) =>
                             onUpdateState({ editedRecur: value })
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index 4a3fec6e..83411257 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -93,6 +93,7 @@ export const Tasks = (
     depends: [],
   });
   const [isCreatingNewProject, setIsCreatingNewProject] = useState(false);
+  const [isCreatingNewTag, setIsCreatingNewTag] = useState(false);
   const [isAddTaskOpen, setIsAddTaskOpen] = useState(false);
   const [_isDialogOpen, setIsDialogOpen] = useState(false);
   const [tagInput, setTagInput] = useState('');
@@ -1073,9 +1074,12 @@ export const Tasks = (
                         tagInput={tagInput}
                         setTagInput={setTagInput}
                         onSubmit={handleAddTask}
+                        uniqueProjects={uniqueProjects}
                         isCreatingNewProject={isCreatingNewProject}
                         setIsCreatingNewProject={setIsCreatingNewProject}
-                        uniqueProjects={uniqueProjects}
+                        uniqueTags={uniqueTags}
+                        isCreatingNewTag={isCreatingNewTag}
+                        setIsCreatingNewTag={setIsCreatingNewTag}
                         allTasks={tasks}
                       />
                     </div>
@@ -1202,6 +1206,9 @@ export const Tasks = (
                             uniqueProjects={uniqueProjects}
                             isCreatingNewProject={isCreatingNewProject}
                             setIsCreatingNewProject={setIsCreatingNewProject}
+                            uniqueTags={uniqueTags}
+                            isCreatingNewTag={isCreatingNewTag}
+                            setIsCreatingNewTag={setIsCreatingNewTag}
                             onSaveDescription={handleSaveDescription}
                             onSaveTags={handleSaveTags}
                             onSavePriority={handleSavePriority}
@@ -1381,9 +1388,12 @@ export const Tasks = (
                         tagInput={tagInput}
                         setTagInput={setTagInput}
                         onSubmit={handleAddTask}
+                        uniqueProjects={uniqueProjects}
                         isCreatingNewProject={isCreatingNewProject}
                         setIsCreatingNewProject={setIsCreatingNewProject}
-                        uniqueProjects={uniqueProjects}
+                        uniqueTags={uniqueTags}
+                        isCreatingNewTag={isCreatingNewTag}
+                        setIsCreatingNewTag={setIsCreatingNewTag}
                         allTasks={tasks}
                       />
                     </div>
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
index 4f1d803c..64fcc274 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
@@ -30,11 +30,15 @@ jest.mock('@/components/ui/date-picker', () => ({
 
 jest.mock('@/components/ui/select', () => {
   return {
-    Select: ({ children, onValueChange, value }: any) => {
-      // Create a simple select element that calls onValueChange when changed
+    Select: ({
+      children,
+      onValueChange,
+      value,
+      'data-testid': testId,
+    }: any) => {
       return (
         <select
-          data-testid="project-select"
+          data-testid={testId}
           value={value || ''}
           onChange={(e) => onValueChange?.(e.target.value)}
         >
@@ -42,9 +46,9 @@ jest.mock('@/components/ui/select', () => {
         </select>
       );
     },
-    SelectTrigger: ({ children, 'data-testid': dataTestId, ...props }: any) => (
-      <div {...props}>{children}</div>
-    ),
+    SelectTrigger: ({ children, ...props }: any) => {
+      return <div {...props}>{children}</div>;
+    },
     SelectValue: ({ placeholder }: any) => (
       <option value="" disabled>
         {placeholder}
@@ -85,9 +89,12 @@ describe('AddTaskDialog Component', () => {
       setTagInput: jest.fn(),
       onSubmit: jest.fn(),
       uniqueProjects: [],
-      allTasks: [],
       isCreatingNewProject: false,
       setIsCreatingNewProject: jest.fn(),
+      uniqueTags: [],
+      isCreatingNewTag: false,
+      setIsCreatingNewTag: jest.fn(),
+      allTasks: [],
     };
   });
 
@@ -283,37 +290,34 @@ describe('AddTaskDialog Component', () => {
   });
 
   describe('Tags', () => {
-    test('adds a tag when user types and presses Enter', () => {
+    beforeEach(() => {
       mockProps.isOpen = true;
-      mockProps.tagInput = 'urgent';
-      render(<AddTaskdialog {...mockProps} />);
+      mockProps.uniqueTags = ['work', 'personal', 'urgent'];
+    });
 
-      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
+    test('adds tag from dropdown when selected', () => {
+      render(<AddTaskdialog {...mockProps} />);
 
-      fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
+      const tagsSelect = screen.getByTestId('tags-select');
+      fireEvent.change(tagsSelect, { target: { value: 'work' } });
 
       expect(mockProps.setNewTask).toHaveBeenCalledWith({
         ...mockProps.newTask,
-        tags: ['urgent'],
+        tags: ['work'],
       });
-
-      expect(mockProps.setTagInput).toHaveBeenCalledWith('');
     });
 
     test('does not add duplicate tags', () => {
-      mockProps.isOpen = true;
-      mockProps.tagInput = 'urgent';
-      mockProps.newTask.tags = ['urgent'];
+      mockProps.newTask.tags = ['work'];
       render(<AddTaskdialog {...mockProps} />);
 
-      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
-      fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
+      const tagsSelect = screen.getByTestId('tags-select');
+      fireEvent.change(tagsSelect, { target: { value: 'work' } });
 
       expect(mockProps.setNewTask).not.toHaveBeenCalled();
     });
 
     test('removes a tag when user clicks the remove button', () => {
-      mockProps.isOpen = true;
       mockProps.newTask.tags = ['urgent', 'important'];
       render(<AddTaskdialog {...mockProps} />);
 
@@ -328,7 +332,7 @@ describe('AddTaskDialog Component', () => {
     });
 
     test('displays tags as badges', () => {
-      mockProps.isOpen = true;
+      mockProps.uniqueTags = [];
       mockProps.newTask.tags = ['urgent', 'work'];
       render(<AddTaskdialog {...mockProps} />);
 
@@ -337,25 +341,65 @@ describe('AddTaskDialog Component', () => {
     });
 
     test('updates tagInput when user types in tag field', () => {
-      mockProps.isOpen = true;
+      mockProps.isCreatingNewTag = true;
       render(<AddTaskdialog {...mockProps} />);
 
-      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
-      fireEvent.change(tagsInput, { target: { value: 'new-tag' } });
+      const tagInput = screen.getByPlaceholderText('New tag name');
+      fireEvent.change(tagInput, { target: { value: 'new-tag' } });
 
       expect(mockProps.setTagInput).toHaveBeenCalledWith('new-tag');
     });
 
     test('does not add empty tag when tagInput is empty', () => {
-      mockProps.isOpen = true;
+      mockProps.isCreatingNewTag = true;
       mockProps.tagInput = '';
       render(<AddTaskdialog {...mockProps} />);
 
-      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
-      fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
+      const tagInput = screen.getByPlaceholderText('New tag name');
+      fireEvent.keyDown(tagInput, { key: 'Enter', code: 'Enter' });
 
       expect(mockProps.setNewTask).not.toHaveBeenCalled();
     });
+
+    test('displays unique tags in dropdown options', () => {
+      render(<AddTaskdialog {...mockProps} />);
+
+      expect(screen.getByText('work')).toBeInTheDocument();
+      expect(screen.getByText('personal')).toBeInTheDocument();
+      expect(screen.getByText('urgent')).toBeInTheDocument();
+    });
+
+    test('disables already selected tags from dropdown', () => {
+      mockProps.newTask.tags = ['work'];
+
+      render(<AddTaskdialog {...mockProps} />);
+
+      const workOption = screen.queryByRole('option', { name: 'work' });
+      expect(workOption).toBeDisabled();
+
+      const personalOption = screen.getByRole('option', { name: 'personal' });
+      expect(personalOption).not.toBeDisabled();
+    });
+
+    test('sets isCreatingNewTag to true when "create new tag" is selected', () => {
+      render(<AddTaskdialog {...mockProps} />);
+
+      const tagsSelect = screen.getByTestId('tags-select');
+      fireEvent.change(tagsSelect, { target: { value: '__CREATE_NEW__' } });
+
+      expect(mockProps.setIsCreatingNewTag).toHaveBeenCalledWith(true);
+    });
+
+    test('closes create mode after adding new tag', () => {
+      mockProps.isCreatingNewTag = true;
+      mockProps.tagInput = 'newTag';
+      render(<AddTaskdialog {...mockProps} />);
+
+      const tagInput = screen.getByPlaceholderText('New tag name');
+      fireEvent.keyDown(tagInput, { key: 'Enter' });
+
+      expect(mockProps.setIsCreatingNewTag).toHaveBeenCalledWith(false);
+    });
   });
 
   describe('Date Fields', () => {
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
index e92b12e8..9e628c8a 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
@@ -90,6 +90,9 @@ describe('TaskDialog Component', () => {
     uniqueProjects: [],
     isCreatingNewProject: false,
     setIsCreatingNewProject: jest.fn(),
+    uniqueTags: [],
+    isCreatingNewTag: false,
+    setIsCreatingNewTag: jest.fn(),
     onSaveDescription: jest.fn(),
     onSaveTags: jest.fn(),
     onSavePriority: jest.fn(),
@@ -344,29 +347,6 @@ describe('TaskDialog Component', () => {
       }
     });
 
-    test('should add new tag on Enter key press', () => {
-      const editingState = {
-        ...mockEditState,
-        isEditingTags: true,
-        editTagInput: 'newtag',
-        editedTags: ['tag1', 'tag2'],
-      };
-
-      render(
-        <TaskDialog {...defaultProps} isOpen={true} editState={editingState} />
-      );
-
-      const input = screen.getByPlaceholderText(
-        'Add a tag (press enter to add)'
-      );
-      fireEvent.keyDown(input, { key: 'Enter' });
-
-      expect(defaultProps.onUpdateState).toHaveBeenCalledWith({
-        editedTags: ['tag1', 'tag2', 'newtag'],
-        editTagInput: '',
-      });
-    });
-
     test('should remove tag when X button is clicked', () => {
       const editingState = {
         ...mockEditState,
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
index 5232b324..2c7f36ff 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
@@ -49,10 +49,15 @@ jest.mock('@/components/ui/multi-select', () => ({
 
 jest.mock('@/components/ui/select', () => {
   return {
-    Select: ({ children, onValueChange, value }: any) => {
+    Select: ({
+      children,
+      onValueChange,
+      value,
+      'data-testid': testId,
+    }: any) => {
       return (
         <select
-          data-testid="project-select"
+          data-testid={testId}
           value={value}
           onChange={(e) => onValueChange?.(e.target.value)}
         >
@@ -327,16 +332,10 @@ describe('Tasks Component', () => {
       const pencilButton = within(tagsRow).getByRole('button');
       fireEvent.click(pencilButton);
 
-      const editInput = await screen.findByPlaceholderText(
-        'Add a tag (press enter to add)'
-      );
-
-      fireEvent.change(editInput, { target: { value: 'newtag' } });
-      fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
-
-      expect(await screen.findByText('newtag')).toBeInTheDocument();
-
-      expect((editInput as HTMLInputElement).value).toBe('');
+      const saveButton = await screen.findByRole('button', {
+        name: /save tags/i,
+      });
+      expect(saveButton).toBeInTheDocument();
     });
 
     test('adds a tag while editing and saves updated tags to backend', async () => {
@@ -354,14 +353,8 @@ describe('Tasks Component', () => {
       const pencilButton = within(tagsRow).getByRole('button');
       fireEvent.click(pencilButton);
 
-      const editInput = await screen.findByPlaceholderText(
-        'Add a tag (press enter to add)'
-      );
-
-      fireEvent.change(editInput, { target: { value: 'addedtag' } });
-      fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
-
-      expect(await screen.findByText('addedtag')).toBeInTheDocument();
+      const tagSelect = await screen.findByTestId('tags-select');
+      fireEvent.change(tagSelect, { target: { value: 'tag2' } });
 
       const saveButton = await screen.findByRole('button', {
         name: /save tags/i,
@@ -374,12 +367,8 @@ describe('Tasks Component', () => {
       });
 
       const hooks = require('../hooks');
-      expect(hooks.editTaskOnBackend).toHaveBeenCalled();
-
       const callArg = hooks.editTaskOnBackend.mock.calls[0][0];
-      expect(callArg.tags).toEqual(
-        expect.arrayContaining(['tag1', 'addedtag'])
-      );
+      expect(callArg.tags).toEqual(expect.arrayContaining(['tag1', 'tag2']));
     });
 
     test('removes a tag while editing and saves updated tags to backend', async () => {
@@ -397,27 +386,20 @@ describe('Tasks Component', () => {
       const pencilButton = within(tagsRow).getByRole('button');
       fireEvent.click(pencilButton);
 
-      const editInput = await screen.findByPlaceholderText(
-        'Add a tag (press enter to add)'
-      );
-
-      fireEvent.change(editInput, { target: { value: 'newtag' } });
-      fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
-
-      expect(await screen.findByText('newtag')).toBeInTheDocument();
+      await screen.findByRole('button', { name: /save tags/i });
 
-      const tagBadge = screen.getByText('tag1');
+      const tagBadges = screen.getAllByText('tag1');
+      const tagBadge = tagBadges.find((el) => el.tagName === 'SPAN')!;
       const badgeContainer = (tagBadge.closest('div') ||
         tagBadge.parentElement) as HTMLElement;
 
       const removeButton = within(badgeContainer).getByText('✖');
       fireEvent.click(removeButton);
 
-      expect(screen.queryByText('tag2')).not.toBeInTheDocument();
-
       const saveButton = await screen.findByRole('button', {
         name: /save tags/i,
       });
+
       fireEvent.click(saveButton);
 
       await waitFor(() => {
@@ -426,11 +408,9 @@ describe('Tasks Component', () => {
       });
 
       const hooks = require('../hooks');
-      expect(hooks.editTaskOnBackend).toHaveBeenCalled();
-
       const callArg = hooks.editTaskOnBackend.mock.calls[0][0];
 
-      expect(callArg.tags).toEqual(expect.arrayContaining(['newtag', 'tag1']));
+      expect(callArg.tags).toEqual(expect.arrayContaining([]));
     });
 
     it('clicking checkbox does not open task detail dialog', async () => {
@@ -1166,7 +1146,7 @@ describe('Tasks Component', () => {
     const editButton = within(priorityRow).getByLabelText('edit');
     fireEvent.click(editButton);
 
-    const select = within(priorityRow).getByTestId('project-select');
+    const select = within(priorityRow).getByTestId('priority-select');
     fireEvent.change(select, { target: { value: 'H' } });
 
     const saveButton = screen.getByLabelText('save');
@@ -1237,14 +1217,17 @@ describe('Tasks Component', () => {
     const editButton = within(tagsRow).getByLabelText('edit');
     fireEvent.click(editButton);
 
-    const editInput = await screen.findByPlaceholderText(
-      'Add a tag (press enter to add)'
-    );
+    const tagBadges = await screen.findAllByText('tag2');
+    const tagBadge = tagBadges.find((el) => el.tagName === 'SPAN')!;
+    const badgeContainer = (tagBadge.closest('div') ||
+      tagBadge.parentElement) as HTMLElement;
+    const removeButton = within(badgeContainer).getByText('✖');
 
-    fireEvent.change(editInput, { target: { value: 'unsyncedtag' } });
-    fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
+    fireEvent.click(removeButton);
 
-    const saveButton = screen.getByLabelText('Save tags');
+    const saveButton = await screen.findByRole('button', {
+      name: /save tags/i,
+    });
     fireEvent.click(saveButton);
 
     await waitFor(() => {
@@ -1273,7 +1256,7 @@ describe('Tasks Component', () => {
     const editButton = within(recurRow).getByLabelText('edit');
     fireEvent.click(editButton);
 
-    const select = within(recurRow).getByTestId('project-select');
+    const select = within(recurRow).getByTestId('recur-select');
     fireEvent.change(select, { target: { value: 'weekly' } });
 
     const saveButton = screen.getByLabelText('save');
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/tasks-utils.test.ts b/frontend/src/components/HomeComponents/Tasks/__tests__/tasks-utils.test.ts
index a68469aa..d28f0922 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/tasks-utils.test.ts
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/tasks-utils.test.ts
@@ -13,6 +13,7 @@ import {
   hashKey,
   parseTaskwarriorDate,
   isOverdue,
+  processTagInput,
 } from '../tasks-utils';
 import { Task } from '@/components/utils/types';
 
@@ -636,3 +637,35 @@ describe('isOverdue', () => {
     expect(isOverdue('invalid-date')).toBe(false);
   });
 });
+
+describe('processTagInput', () => {
+  it('returns null when key is not Enter', () => {
+    const result = processTagInput('a', 'newtag', ['existing']);
+    expect(result).toBeNull();
+  });
+
+  it('returns null when tagInput is empty', () => {
+    const result = processTagInput('Enter', '', ['existing']);
+    expect(result).toBeNull();
+  });
+
+  it('returns null when tagInput is only whitespace', () => {
+    const result = processTagInput('Enter', '   ', ['existing']);
+    expect(result).toBeNull();
+  });
+
+  it('returns null when tag already exists', () => {
+    const result = processTagInput('Enter', 'existing', ['existing', 'other']);
+    expect(result).toBeNull();
+  });
+
+  it('returns trimmed tag when valid and not duplicate', () => {
+    const result = processTagInput('Enter', 'newtag', ['existing']);
+    expect(result).toBe('newtag');
+  });
+
+  it('trims whitespace from tag input', () => {
+    const result = processTagInput('Enter', '  newtag  ', ['existing']);
+    expect(result).toBe('newtag');
+  });
+});
diff --git a/frontend/src/components/HomeComponents/Tasks/tasks-utils.ts b/frontend/src/components/HomeComponents/Tasks/tasks-utils.ts
index 50879366..1fc05c59 100644
--- a/frontend/src/components/HomeComponents/Tasks/tasks-utils.ts
+++ b/frontend/src/components/HomeComponents/Tasks/tasks-utils.ts
@@ -289,3 +289,14 @@ export const hashKey = (key: string, email: string): string => {
   }
   return Math.abs(hash).toString(36);
 };
+
+export const processTagInput = (
+  key: string,
+  tagInput: string,
+  existingTags: string[]
+): string | null => {
+  if (key !== 'Enter' || !tagInput.trim()) return null;
+
+  const newTag = tagInput.trim();
+  return existingTags.includes(newTag) ? null : newTag;
+};
diff --git a/frontend/src/components/utils/types.ts b/frontend/src/components/utils/types.ts
index e10f761e..2eae31a2 100644
--- a/frontend/src/components/utils/types.ts
+++ b/frontend/src/components/utils/types.ts
@@ -120,9 +120,12 @@ export interface AddTaskDialogProps {
   tagInput: string;
   setTagInput: (value: string) => void;
   onSubmit: (task: TaskFormData) => void;
+  uniqueProjects: string[];
   isCreatingNewProject: boolean;
   setIsCreatingNewProject: (value: boolean) => void;
-  uniqueProjects: string[];
+  uniqueTags: string[];
+  isCreatingNewTag: boolean;
+  setIsCreatingNewTag: (value: boolean) => void;
   allTasks?: Task[];
 }
 
@@ -141,6 +144,9 @@ export interface EditTaskDialogProps {
   uniqueProjects: string[];
   isCreatingNewProject: boolean;
   setIsCreatingNewProject: (value: boolean) => void;
+  uniqueTags: string[];
+  isCreatingNewTag: boolean;
+  setIsCreatingNewTag: (value: boolean) => void;
   onSaveDescription: (task: Task, description: string) => void;
   onSaveTags: (task: Task, tags: string[]) => void;
   onSavePriority: (task: Task, priority: string) => void;