From 46cd01deb499f579796a9ae4128d9f3e07bf214e 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 multi-select tag component for Add/Edit
 Task dialogs

- Create SearchAndAddSelector component with search, select, and create functionality
- Use local Popover (no Portal) to fix click-through issue in Dialog without modifying global popover.tsx
- Display selected tags as removable chips with X buttons
- Add search filtering for existing tags
- Add inline "Create new tag" option for non-existing tags
- Integrate SearchAndAddSelector into TaskDialog and AddTaskDialog

Bug fix:
- Fix tag removal not persisting: now sends tags with "-" prefix to backend for removals
- Updated handleSaveTags to calculate tag additions and removals correctly

Tests:
- Add comprehensive tests for SearchAndAddSelector component
- Update AddTaskDialog tests for new tag selection flow
- Update TaskDialog tests for tag editing with SearchAndAddSelector
- Mock SearchAndAddSelector in tests

Fixes: #210
---
 .../HomeComponents/Tasks/AddTaskDialog.tsx    |  63 +---
 .../Tasks/SearchAndAddSelector.tsx            | 166 ++++++++
 .../HomeComponents/Tasks/TaskDialog.tsx       | 146 ++------
 .../components/HomeComponents/Tasks/Tasks.tsx |  37 +-
 .../HomeComponents/Tasks/UseEditTask.tsx      |   2 -
 .../Tasks/__tests__/AddTaskDialog.test.tsx    | 113 +++---
 .../__tests__/SearchAndAddSelector.test.tsx   | 353 ++++++++++++++++++
 .../Tasks/__tests__/TaskDialog.test.tsx       | 125 ++++---
 .../Tasks/__tests__/Tasks.test.tsx            | 107 +++---
 .../Tasks/__tests__/UseEditTask.test.ts       |   1 -
 frontend/src/components/utils/types.ts        |   7 +-
 11 files changed, 775 insertions(+), 345 deletions(-)
 create mode 100644 frontend/src/components/HomeComponents/Tasks/SearchAndAddSelector.tsx
 create mode 100644 frontend/src/components/HomeComponents/Tasks/__tests__/SearchAndAddSelector.test.tsx

diff --git a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
index bbaad655..8f2c1353 100644
--- a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
@@ -24,18 +24,18 @@ import {
 } from '@/components/ui/select';
 import { AddTaskDialogProps } from '@/components/utils/types';
 import { format } from 'date-fns';
+import { SearchAndAddSelector } from './SearchAndAddSelector';
 
 export const AddTaskdialog = ({
   isOpen,
   setIsOpen,
   newTask,
   setNewTask,
-  tagInput,
-  setTagInput,
   onSubmit,
   isCreatingNewProject,
   setIsCreatingNewProject,
   uniqueProjects = [],
+  uniqueTags = [],
   allTasks = [],
 }: AddTaskDialogProps) => {
   const [annotationInput, setAnnotationInput] = useState('');
@@ -102,20 +102,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,
-      tags: newTask.tags.filter((tag) => tag !== tagToRemove),
-    });
-  };
-
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
@@ -194,6 +180,7 @@ export const AddTaskdialog = ({
             </Label>
             <div className="col-span-3 space-y-2">
               <Select
+                data-testid="project-select"
                 value={
                   isCreatingNewProject ? '__CREATE_NEW__' : newTask.project
                 }
@@ -210,7 +197,7 @@ export const AddTaskdialog = ({
                   }
                 }}
               >
-                <SelectTrigger id="project" data-testid="project-select">
+                <SelectTrigger id="project">
                   <SelectValue
                     placeholder={
                       uniqueProjects.length
@@ -376,45 +363,19 @@ 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">
+              <SearchAndAddSelector
+                options={uniqueTags}
+                selected={newTask.tags}
+                onChange={(tags) => setNewTask({ ...newTask, tags })}
+                placeholder="Search or create tag.."
               />
             </div>
           </div>
-
-          <div className="mt-2">
-            {newTask.tags.length > 0 && (
-              <div className="grid grid-cols-4 items-center">
-                <div> </div>
-                <div className="flex flex-wrap gap-2 col-span-3">
-                  {newTask.tags.map((tag, index) => (
-                    <Badge key={index}>
-                      <span>{tag}</span>
-                      <button
-                        type="button"
-                        className="ml-2 text-red-500"
-                        onClick={() => handleRemoveTag(tag)}
-                      >
-                        ✖
-                      </button>
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
           <div className="grid grid-cols-8 items-center gap-4">
             <Label htmlFor="annotations" className="text-right col-span-2">
               Annotation
diff --git a/frontend/src/components/HomeComponents/Tasks/SearchAndAddSelector.tsx b/frontend/src/components/HomeComponents/Tasks/SearchAndAddSelector.tsx
new file mode 100644
index 00000000..e6b5c316
--- /dev/null
+++ b/frontend/src/components/HomeComponents/Tasks/SearchAndAddSelector.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { Check, ChevronDown, X } from 'lucide-react';
+import { cn } from '@/components/utils/utils';
+import { Input } from '@/components/ui/input';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Button } from '@/components/ui/button';
+
+const LocalPopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]',
+      className
+    )}
+    {...props}
+  />
+));
+LocalPopoverContent.displayName = 'LocalPopoverContent';
+
+interface SearchAndAddSelectorProps {
+  options: string[];
+  selected: string[];
+  onChange: (items: string[]) => void;
+  placeholder?: string;
+}
+
+export function SearchAndAddSelector({
+  options,
+  selected,
+  onChange,
+  placeholder = 'Search or create..',
+}: SearchAndAddSelectorProps) {
+  const [open, setOpen] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState('');
+
+  const filteredOptions = options.filter((option) =>
+    option.toLowerCase().includes(searchValue.toLowerCase())
+  );
+
+  const isNewItem =
+    searchValue.trim() !== '' &&
+    !options.some(
+      (opt) => opt.toLowerCase() === searchValue.trim().toLowerCase()
+    );
+
+  const handleSelect = (item: string) => {
+    if (selected.includes(item)) {
+      onChange(selected.filter((s) => s !== item));
+    } else {
+      onChange([...selected, item]);
+    }
+  };
+
+  const handleCreateItem = () => {
+    const newItem = searchValue.trim();
+    if (newItem && !selected.includes(newItem)) {
+      onChange([...selected, newItem]);
+      setSearchValue('');
+    }
+  };
+
+  const handleRemoveItem = (item: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange(selected.filter((s) => s !== item));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && isNewItem) {
+      e.preventDefault();
+      handleCreateItem();
+    }
+  };
+
+  return (
+    <div className={cn('w-full')}>
+      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+        <PopoverPrimitive.Trigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between h-auto min-h-[40px] hover:bg-transparent"
+          >
+            <div className="flex flex-wrap gap-1 items-center flex-1">
+              {selected.length === 0 ? (
+                <span className="text-muted-foreground">{placeholder}</span>
+              ) : (
+                selected.map((item) => (
+                  <span
+                    key={item}
+                    className="px-2 py-0.5 rounded-md bg-muted text-sm flex items-center gap-1"
+                  >
+                    {item}
+                    <X
+                      className="w-3 h-3 cursor-pointer hover:text-red-500"
+                      onClick={(e) => handleRemoveItem(item, e)}
+                    />
+                  </span>
+                ))
+              )}
+            </div>
+            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverPrimitive.Trigger>
+
+        <LocalPopoverContent className="w-full p-0" align="start">
+          <div className="p-2">
+            <Input
+              placeholder={placeholder}
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              className="h-9"
+              autoFocus
+            />
+          </div>
+
+          <div className="max-h-60 overflow-y-auto">
+            {isNewItem && (
+              <div
+                className="flex items-center px-3 py-2 cursor-pointer hover:bg-accent text-green-500"
+                onClick={handleCreateItem}
+              >
+                <span className="mr-2">+</span>
+                Create "{searchValue.trim()}"
+              </div>
+            )}
+
+            {filteredOptions.length === 0 && !isNewItem ? (
+              <div className="px-3 py-2 text-muted-foreground text-sm">
+                No results found.
+              </div>
+            ) : (
+              filteredOptions.map((option) => {
+                const isSelected = selected.includes(option);
+                return (
+                  <div
+                    key={option}
+                    className={cn(
+                      'flex items-center px-3 py-2 cursor-pointer hover:bg-accent',
+                      isSelected && 'bg-accent/50'
+                    )}
+                    onClick={() => handleSelect(option)}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        isSelected ? 'opacity-100' : 'opacity-0'
+                      )}
+                    />
+                    {option}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </LocalPopoverContent>
+      </PopoverPrimitive.Root>
+    </div>
+  );
+}
diff --git a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
index 2c2be1e6..b27da437 100644
--- a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
@@ -40,6 +40,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useTaskDialogKeyboard } from './UseTaskDialogKeyboard';
 import { FIELDS } from './constants';
 import { useTaskDialogFocusMap } from './UseTaskDialogFocusMap';
+import { SearchAndAddSelector } from './SearchAndAddSelector';
 
 export const TaskDialog = ({
   index,
@@ -53,13 +54,14 @@ export const TaskDialog = ({
   editState,
   onUpdateState,
   allTasks,
+  uniqueProjects,
   isCreatingNewProject,
   setIsCreatingNewProject,
-  uniqueProjects,
+  uniqueTags,
   onSaveDescription,
-  onSaveTags,
   onSavePriority,
   onSaveProject,
+  onSaveTags,
   onSaveWaitDate,
   onSaveStartDate,
   onSaveEntryDate,
@@ -993,6 +995,7 @@ export const TaskDialog = ({
                     {editState.isEditingPriority ? (
                       <div className="flex items-center">
                         <Select
+                          data-testid="priority-select"
                           value={editState.editedPriority}
                           onValueChange={(value) =>
                             onUpdateState({
@@ -1077,6 +1080,7 @@ export const TaskDialog = ({
                       <>
                         <div className="col-span-3 space-y-2 w-[300px]">
                           <Select
+                            data-testid="project-select"
                             value={
                               isCreatingNewProject
                                 ? '__CREATE_NEW__'
@@ -1095,10 +1099,7 @@ export const TaskDialog = ({
                               }
                             }}
                           >
-                            <SelectTrigger
-                              id="project"
-                              data-testid="project-select"
-                            >
+                            <SelectTrigger id="project">
                               <SelectValue
                                 placeholder={
                                   uniqueProjects.length
@@ -1213,104 +1214,39 @@ export const TaskDialog = ({
                   <TableCell>Tags:</TableCell>
                   <TableCell>
                     {editState.isEditingTags ? (
-                      <div>
-                        <div className="flex items-center w-full">
-                          <Input
-                            ref={(element) =>
-                              (inputRefs.current.tags = element)
-                            }
-                            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: '',
-                                });
-                              }
-                            }}
-                          />
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            aria-label="Save tags"
-                            onClick={() => {
-                              onSaveTags(task, editState.editedTags);
-                              onUpdateState({
-                                isEditingTags: false,
-                                editTagInput: '',
-                              });
-                            }}
-                          >
-                            <CheckIcon className="h-4 w-4 text-green-500" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            aria-label="Cancel editing tags"
-                            onClick={() => {
-                              onUpdateState({
-                                isEditingTags: false,
-                                editedTags: task.tags || [],
-                                editTagInput: '',
-                              });
-                            }}
-                          >
-                            <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>
+                      <div className="col-span-3 space-y-2 w-[400px] flex">
+                        <SearchAndAddSelector
+                          options={uniqueTags}
+                          selected={editState.editedTags}
+                          onChange={(tags) =>
+                            onUpdateState({ editedTags: tags })
+                          }
+                          placeholder="Search or create tags..."
+                        />
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          aria-label="Save tags"
+                          onClick={() => {
+                            onSaveTags(task, editState.editedTags);
+                            onUpdateState({ isEditingTags: false });
+                          }}
+                        >
+                          <CheckIcon className="h-4 w-4 text-green-500" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          aria-label="cancel"
+                          onClick={() => {
+                            onUpdateState({
+                              isEditingTags: false,
+                              editedTags: task.tags || [],
+                            });
+                          }}
+                        >
+                          <XIcon className="h-4 w-4 text-red-500" />
+                        </Button>
                       </div>
                     ) : (
                       <div className="flex items-center flex-wrap">
@@ -1339,7 +1275,6 @@ export const TaskDialog = ({
                             onUpdateState({
                               isEditingTags: true,
                               editedTags: task.tags || [],
-                              editTagInput: '',
                             })
                           }
                         >
@@ -1448,6 +1383,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 78a3f940..8c3dfb94 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -105,11 +105,7 @@ export const Tasks = (
   const [isCreatingNewProject, setIsCreatingNewProject] = useState(false);
   const [isAddTaskOpen, setIsAddTaskOpen] = useState(false);
   const [_isDialogOpen, setIsDialogOpen] = useState(false);
-  const [tagInput, setTagInput] = useState('');
   const [_selectedTask, setSelectedTask] = useState<Task | null>(null);
-  const [editedTags, setEditedTags] = useState<string[]>(
-    _selectedTask?.tags || []
-  );
   const [searchTerm, setSearchTerm] = useState('');
   const [debouncedTerm, setDebouncedTerm] = useState('');
   const [lastSyncTime, setLastSyncTime] = useState<number | null>(null);
@@ -198,11 +194,6 @@ export const Tasks = (
       setTasksPerPage(parseInt(storedTasksPerPage, 10));
     }
   }, [props.email]);
-  useEffect(() => {
-    if (_selectedTask) {
-      setEditedTags(_selectedTask.tags || []);
-    }
-  }, [_selectedTask]);
 
   useEffect(() => {
     const hashedKey = hashKey('lastSyncTime', props.email);
@@ -851,11 +842,16 @@ export const Tasks = (
   ]);
 
   const handleSaveTags = (task: Task, tags: string[]) => {
-    const currentTags = tags || [];
-    const removedTags = currentTags.filter((tag) => !editedTags.includes(tag));
-    const updatedTags = editedTags.filter((tag) => tag.trim() !== '');
-    const tagsToRemove = removedTags.map((tag) => `${tag}`);
-    const finalTags = [...updatedTags, ...tagsToRemove];
+    const originalTags = task.tags || [];
+    const finalTags = (tags || []).filter((tag) => tag.trim() !== '');
+    const tagsToAdd = finalTags.filter((tag) => !originalTags.includes(tag));
+    const tagsToRemove = originalTags
+      .filter((tag) => !finalTags.includes(tag))
+      .map((tag) => `-${tag}`);
+
+    const tagOperations = [...tagsToAdd, ...tagsToRemove];
+
+    task.tags = finalTags;
 
     setUnsyncedTaskUuids((prev) => new Set([...prev, task.uuid]));
 
@@ -864,7 +860,7 @@ export const Tasks = (
       props.encryptionSecret,
       props.UUID,
       task.description,
-      finalTags,
+      tagOperations,
       task.uuid.toString(),
       task.project,
       task.start,
@@ -1123,12 +1119,11 @@ export const Tasks = (
                         setIsOpen={setIsAddTaskOpen}
                         newTask={newTask}
                         setNewTask={setNewTask}
-                        tagInput={tagInput}
-                        setTagInput={setTagInput}
                         onSubmit={handleAddTask}
+                        uniqueProjects={uniqueProjects}
                         isCreatingNewProject={isCreatingNewProject}
                         setIsCreatingNewProject={setIsCreatingNewProject}
-                        uniqueProjects={uniqueProjects}
+                        uniqueTags={uniqueTags}
                         allTasks={tasks}
                       />
                     </div>
@@ -1255,6 +1250,7 @@ export const Tasks = (
                             uniqueProjects={uniqueProjects}
                             isCreatingNewProject={isCreatingNewProject}
                             setIsCreatingNewProject={setIsCreatingNewProject}
+                            uniqueTags={uniqueTags}
                             onSaveDescription={handleSaveDescription}
                             onSaveTags={handleSaveTags}
                             onSavePriority={handleSavePriority}
@@ -1433,12 +1429,11 @@ export const Tasks = (
                         setIsOpen={setIsAddTaskOpen}
                         newTask={newTask}
                         setNewTask={setNewTask}
-                        tagInput={tagInput}
-                        setTagInput={setTagInput}
                         onSubmit={handleAddTask}
+                        uniqueProjects={uniqueProjects}
                         isCreatingNewProject={isCreatingNewProject}
                         setIsCreatingNewProject={setIsCreatingNewProject}
-                        uniqueProjects={uniqueProjects}
+                        uniqueTags={uniqueTags}
                         allTasks={tasks}
                       />
                     </div>
diff --git a/frontend/src/components/HomeComponents/Tasks/UseEditTask.tsx b/frontend/src/components/HomeComponents/Tasks/UseEditTask.tsx
index 023ced3d..9b2f9a0f 100644
--- a/frontend/src/components/HomeComponents/Tasks/UseEditTask.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/UseEditTask.tsx
@@ -7,7 +7,6 @@ export const useEditTask = (selectedTask: Task | null) => {
     editedDescription: '',
     isEditingTags: false,
     editedTags: [],
-    editTagInput: '',
     isEditingPriority: false,
     editedPriority: 'NONE',
     isEditingProject: false,
@@ -56,7 +55,6 @@ export const useEditTask = (selectedTask: Task | null) => {
       editedDescription: '',
       isEditingTags: false,
       editedTags: [],
-      editTagInput: '',
       isEditingPriority: false,
       editedPriority: 'NONE',
       isEditingProject: false,
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
index b89ec1a8..b9a0f83f 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
@@ -30,11 +30,10 @@ 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, ...props }: any) => {
       return (
         <select
-          data-testid="project-select"
+          {...props}
           value={value || ''}
           onChange={(e) => onValueChange?.(e.target.value)}
         >
@@ -42,9 +41,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}
@@ -59,6 +58,45 @@ jest.mock('@/components/ui/select', () => {
   };
 });
 
+jest.mock('../SearchAndAddSelector', () => ({
+  SearchAndAddSelector: ({ options, selected, onChange, placeholder }: any) => (
+    <div data-testid="search-and-add-selector">
+      <button data-testid="multi-select-trigger" onClick={() => {}}>
+        {selected.length === 0
+          ? placeholder
+          : selected.map((tag: string) => (
+              <span key={tag} data-testid={`tag-${tag}`}>
+                {tag}
+                <button
+                  data-testid={`remove-${tag}`}
+                  onClick={() =>
+                    onChange(selected.filter((t: string) => t !== tag))
+                  }
+                >
+                  ✖
+                </button>
+              </span>
+            ))}
+      </button>
+      <div data-testid="options-list">
+        {options.map((opt: string) => (
+          <div
+            key={opt}
+            data-testid={`option-${opt}`}
+            onClick={() => {
+              if (!selected.includes(opt)) {
+                onChange([...selected, opt]);
+              }
+            }}
+          >
+            {opt}
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+}));
+
 describe('AddTaskDialog Component', () => {
   let mockProps: any;
 
@@ -81,13 +119,12 @@ describe('AddTaskDialog Component', () => {
         depends: [],
       },
       setNewTask: jest.fn(),
-      tagInput: '',
-      setTagInput: jest.fn(),
       onSubmit: jest.fn(),
       uniqueProjects: [],
-      allTasks: [],
       isCreatingNewProject: false,
       setIsCreatingNewProject: jest.fn(),
+      uniqueTags: [],
+      allTasks: [],
     };
   });
 
@@ -298,43 +335,39 @@ 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 when option is clicked', () => {
+      render(<AddTaskdialog {...mockProps} />);
 
-      fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
+      const workOption = screen.getByTestId('option-work');
+      fireEvent.click(workOption);
 
       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 workOption = screen.getByTestId('option-work');
+      fireEvent.click(workOption);
 
       expect(mockProps.setNewTask).not.toHaveBeenCalled();
     });
 
-    test('removes a tag when user clicks the remove button', () => {
-      mockProps.isOpen = true;
+    test('removes a tag when remove button is clicked', () => {
       mockProps.newTask.tags = ['urgent', 'important'];
       render(<AddTaskdialog {...mockProps} />);
 
-      const removeButtons = screen.getAllByText('✖');
-
-      fireEvent.click(removeButtons[0]);
+      const removeButton = screen.getByTestId('remove-urgent');
+      fireEvent.click(removeButton);
 
       expect(mockProps.setNewTask).toHaveBeenCalledWith({
         ...mockProps.newTask,
@@ -343,33 +376,19 @@ describe('AddTaskDialog Component', () => {
     });
 
     test('displays tags as badges', () => {
-      mockProps.isOpen = true;
       mockProps.newTask.tags = ['urgent', 'work'];
       render(<AddTaskdialog {...mockProps} />);
 
-      expect(screen.getByText('urgent')).toBeInTheDocument();
-      expect(screen.getByText('work')).toBeInTheDocument();
-    });
-
-    test('updates tagInput when user types in tag field', () => {
-      mockProps.isOpen = true;
-      render(<AddTaskdialog {...mockProps} />);
-
-      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
-      fireEvent.change(tagsInput, { target: { value: 'new-tag' } });
-
-      expect(mockProps.setTagInput).toHaveBeenCalledWith('new-tag');
+      expect(screen.getByTestId('tag-urgent')).toBeInTheDocument();
+      expect(screen.getByTestId('tag-work')).toBeInTheDocument();
     });
 
-    test('does not add empty tag when tagInput is empty', () => {
-      mockProps.isOpen = true;
-      mockProps.tagInput = '';
+    test('displays unique tags in options', () => {
       render(<AddTaskdialog {...mockProps} />);
 
-      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
-      fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
-
-      expect(mockProps.setNewTask).not.toHaveBeenCalled();
+      expect(screen.getByTestId('option-work')).toBeInTheDocument();
+      expect(screen.getByTestId('option-personal')).toBeInTheDocument();
+      expect(screen.getByTestId('option-urgent')).toBeInTheDocument();
     });
   });
 
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/SearchAndAddSelector.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/SearchAndAddSelector.test.tsx
new file mode 100644
index 00000000..66afeba5
--- /dev/null
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/SearchAndAddSelector.test.tsx
@@ -0,0 +1,353 @@
+import { render, screen, within } from '@testing-library/react';
+import { SearchAndAddSelector } from '../SearchAndAddSelector';
+import userEvent from '@testing-library/user-event';
+
+describe('SearchAndAddSelector Component', () => {
+  const defaultProps = {
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    selected: [] as string[],
+    onChange: jest.fn(),
+    placeholder: 'Search or create...',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Initial Rendering', () => {
+    test('renders the combobox and shows placeholder when no items are selected', () => {
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+
+      expect(combobox).toBeInTheDocument();
+      expect(screen.getByText(defaultProps.placeholder)).toBeInTheDocument();
+    });
+
+    test('renders selected items instead of placeholder', () => {
+      const selectedItems = ['Option 1', 'Option 2'];
+      render(
+        <SearchAndAddSelector {...defaultProps} selected={selectedItems} />
+      );
+
+      expect(
+        screen.queryByText(defaultProps.placeholder)
+      ).not.toBeInTheDocument();
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+    });
+
+    test('popover options are not visible by default', () => {
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+      expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
+    });
+
+    test('uses default placeholder when not provided', () => {
+      const { options, selected, onChange } = defaultProps;
+      render(
+        <SearchAndAddSelector
+          options={options}
+          selected={selected}
+          onChange={onChange}
+        />
+      );
+
+      expect(screen.getByText('Search or create..')).toBeInTheDocument();
+    });
+  });
+
+  describe('Popover Behavior', () => {
+    test('opens popover when combobox is clicked', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      expect(await screen.findByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+    });
+
+    test('closes popover when clicking outside', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      expect(await screen.findByText('Option 1')).toBeInTheDocument();
+
+      await user.keyboard('{escape}');
+
+      expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Option Selection Behavior', () => {
+    test('selecting an option calls onChange with that option', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const option1 = await screen.findByText('Option 1');
+      await user.click(option1);
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith(['Option 1']);
+    });
+
+    test('can select multiple items', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const option1 = await screen.findByText('Option 1');
+      const option2 = screen.getByText('Option 2');
+
+      await user.click(option1);
+      await user.click(option2);
+
+      expect(defaultProps.onChange).toHaveBeenNthCalledWith(1, ['Option 1']);
+      expect(defaultProps.onChange).toHaveBeenNthCalledWith(2, ['Option 2']);
+    });
+
+    test('clicking an already-selected option removes it', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+
+      const { rerender } = render(
+        <SearchAndAddSelector {...defaultProps} onChange={onChange} />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByText('Option 1'));
+
+      expect(onChange).toHaveBeenNthCalledWith(1, ['Option 1']);
+
+      rerender(
+        <SearchAndAddSelector
+          {...defaultProps}
+          selected={['Option 1']}
+          onChange={onChange}
+        />
+      );
+
+      const popover = screen.getByRole('dialog');
+      await user.click(within(popover).getByText('Option 1'));
+
+      expect(onChange).toHaveBeenNthCalledWith(2, []);
+    });
+  });
+
+  describe('Removing Items', () => {
+    test('clicking the remove button on a selected item removes it', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <SearchAndAddSelector {...defaultProps} selected={['Option 1']} />
+      );
+
+      const selectedTag = screen.getByText('Option 1');
+      const removeButton = selectedTag.querySelector('svg');
+      await user.click(removeButton!);
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith([]);
+    });
+  });
+
+  describe('Search and Filtering', () => {
+    test('filters options based on search input', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, '2');
+
+      expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+      expect(await screen.findByText('Option 2')).toBeInTheDocument();
+    });
+
+    test('shows create option when search input does not match any option', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, 'new Option');
+
+      expect(
+        await screen.findByText('Create "new Option"')
+      ).toBeInTheDocument();
+    });
+
+    test('search is case-insensitive', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, 'option 1');
+
+      expect(await screen.findByText('Option 1')).toBeInTheDocument();
+    });
+
+    test('clearing search input restores all options', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, '2');
+
+      expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+
+      await user.clear(searchInput);
+
+      expect(await screen.findByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+      expect(screen.getByText('Option 3')).toBeInTheDocument();
+    });
+  });
+
+  describe('Creating New Items', () => {
+    test('clicking create option calls onChange with new item', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, 'new Option');
+
+      const createOption = await screen.findByText('Create "new Option"');
+      await user.click(createOption);
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith(['new Option']);
+    });
+
+    test('pressing Enter creates a new item', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, 'another Option{enter}');
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith(['another Option']);
+    });
+
+    test('does not show create option if item already exists', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, 'Option 1');
+
+      expect(screen.queryByText('Create "Option 1"')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    test('handles empty options array', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} options={[]} />);
+
+      await user.click(screen.getByRole('combobox'));
+
+      expect(await screen.findByText('No results found.')).toBeInTheDocument();
+    });
+
+    test('does not create item for whitespace-only input', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, '   {enter}');
+
+      expect(defaultProps.onChange).not.toHaveBeenCalled();
+    });
+
+    test('clicking remove button does not open popover', async () => {
+      const user = userEvent.setup();
+      render(
+        <SearchAndAddSelector {...defaultProps} selected={['Option 1']} />
+      );
+
+      const selectedTag = screen.getByText('Option 1');
+      const removeButton = selectedTag.querySelector('svg');
+      await user.click(removeButton!);
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    test('does not add duplicate when item already selected', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+
+      render(
+        <SearchAndAddSelector
+          {...defaultProps}
+          options={['existingItem']}
+          selected={['existingItem']}
+          onChange={onChange}
+        />
+      );
+      await user.click(screen.getByRole('combobox'));
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, 'existingItem{enter}');
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    test('clears input after creating item', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, 'new item{enter}');
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith(['new item']);
+      expect(searchInput).toHaveValue('');
+    });
+
+    test('trims whitespace when creating new item', async () => {
+      const user = userEvent.setup();
+      render(<SearchAndAddSelector {...defaultProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+
+      const searchInput = screen.getByPlaceholderText(defaultProps.placeholder);
+      await user.type(searchInput, '   trimmed item   {enter}');
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith(['trimmed item']);
+    });
+  });
+});
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
index 709c3ae4..9a150d65 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
@@ -9,6 +9,45 @@ jest.mock('react-copy-to-clipboard', () => ({
   ),
 }));
 
+jest.mock('../SearchAndAddSelector', () => ({
+  SearchAndAddSelector: ({ options, selected, onChange, placeholder }: any) => (
+    <div data-testid="search-and-add-selector">
+      <button data-testid="multi-select-trigger" onClick={() => {}}>
+        {selected.length === 0
+          ? placeholder
+          : selected.map((tag: string) => (
+              <span key={tag} data-testid={`tag-${tag}`}>
+                {tag}
+                <button
+                  data-testid={`remove-${tag}`}
+                  onClick={() =>
+                    onChange(selected.filter((t: string) => t !== tag))
+                  }
+                >
+                  ✖
+                </button>
+              </span>
+            ))}
+      </button>
+      <div data-testid="options-list">
+        {options.map((opt: string) => (
+          <div
+            key={opt}
+            data-testid={`option-${opt}`}
+            onClick={() => {
+              if (!selected.includes(opt)) {
+                onChange([...selected, opt]);
+              }
+            }}
+          >
+            {opt}
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+}));
+
 describe('TaskDialog Component', () => {
   const mockTask: Task = {
     id: 1,
@@ -49,7 +88,6 @@ describe('TaskDialog Component', () => {
     editedPriority: mockTask.priority,
     editedProject: mockTask.project,
     editedTags: mockTask.tags,
-    editTagInput: '',
     isEditingPriority: false,
     isEditingProject: false,
     isEditingTags: false,
@@ -90,6 +128,7 @@ describe('TaskDialog Component', () => {
     uniqueProjects: [],
     isCreatingNewProject: false,
     setIsCreatingNewProject: jest.fn(),
+    uniqueTags: [],
     onSaveDescription: jest.fn(),
     onSaveTags: jest.fn(),
     onSavePriority: jest.fn(),
@@ -323,93 +362,61 @@ describe('TaskDialog Component', () => {
   });
 
   describe('Tags Editing', () => {
-    test('should display existing tags', () => {
+    test('should display existing tags as badges', () => {
       render(<TaskDialog {...defaultProps} isOpen={true} />);
 
       expect(screen.getByText('tag1')).toBeInTheDocument();
       expect(screen.getByText('tag2')).toBeInTheDocument();
     });
 
-    test('should enable tags editing mode', () => {
-      render(<TaskDialog {...defaultProps} isOpen={true} />);
-
-      const tagsRow = screen.getByText('Tags:').closest('tr');
-      const editButton = tagsRow?.querySelector('button');
-
-      if (editButton) {
-        fireEvent.click(editButton);
-        expect(defaultProps.onUpdateState).toHaveBeenCalledWith({
-          isEditingTags: true,
-          editedTags: mockTask.tags || [],
-          editTagInput: '',
-        });
-      }
-    });
-
-    test('should add new tag on Enter key press', () => {
+    test('should call onSaveTags with modified tags when save is clicked', () => {
       const editingState = {
         ...mockEditState,
         isEditingTags: true,
-        editTagInput: 'newtag',
-        editedTags: ['tag1', 'tag2'],
+        editedTags: ['tag1', 'tag2', 'newTag'],
       };
 
       render(
         <TaskDialog {...defaultProps} isOpen={true} editState={editingState} />
       );
 
-      const input = screen.getByPlaceholderText(
-        'Add a tag (press enter to add)'
-      );
-      fireEvent.keyDown(input, { key: 'Enter' });
+      const saveButton = screen.getByRole('button', { name: /save tags/i });
+      fireEvent.click(saveButton);
 
+      expect(defaultProps.onSaveTags).toHaveBeenCalledWith(mockTask, [
+        'tag1',
+        'tag2',
+        'newTag',
+      ]);
       expect(defaultProps.onUpdateState).toHaveBeenCalledWith({
-        editedTags: ['tag1', 'tag2', 'newtag'],
-        editTagInput: '',
+        isEditingTags: false,
       });
     });
 
-    test('should remove tag when X button is clicked', () => {
+    test('should reset tags to original when cancel is clicked', () => {
       const editingState = {
         ...mockEditState,
         isEditingTags: true,
         editedTags: ['tag1', 'tag2'],
       };
-
-      render(
-        <TaskDialog {...defaultProps} isOpen={true} editState={editingState} />
-      );
-
-      const removeButtons = screen.getAllByText('✖');
-      if (removeButtons.length > 0) {
-        fireEvent.click(removeButtons[0]);
-        expect(defaultProps.onUpdateState).toHaveBeenCalled();
-      }
-    });
-
-    test('should save tags when check icon is clicked', () => {
-      const editingState = {
-        ...mockEditState,
-        isEditingTags: true,
-        editedTags: ['tag1', 'tag2', 'tag3'],
+      const propsWithUniqueTags = {
+        ...defaultProps,
+        uniqueTags: ['tag1', 'tag2', 'newTag'],
+        editState: editingState,
       };
 
-      render(
-        <TaskDialog {...defaultProps} isOpen={true} editState={editingState} />
-      );
+      render(<TaskDialog {...propsWithUniqueTags} isOpen={true} />);
 
-      const saveButton = screen
-        .getAllByRole('button')
-        .find((btn) => btn.getAttribute('aria-label') === 'Save tags');
+      const optionButton = screen.getByTestId('option-newTag');
+      fireEvent.click(optionButton);
 
-      if (saveButton) {
-        fireEvent.click(saveButton);
-        expect(defaultProps.onSaveTags).toHaveBeenCalledWith(mockTask, [
-          'tag1',
-          'tag2',
-          'tag3',
-        ]);
-      }
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      fireEvent.click(cancelButton);
+
+      expect(defaultProps.onUpdateState).toHaveBeenCalledWith({
+        isEditingTags: false,
+        editedTags: mockTask.tags,
+      });
     });
   });
 
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
index 36886824..a00cd149 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
@@ -58,10 +58,10 @@ jest.mock('@/components/ui/multi-select', () => ({
 
 jest.mock('@/components/ui/select', () => {
   return {
-    Select: ({ children, onValueChange, value }: any) => {
+    Select: ({ children, onValueChange, value, ...props }: any) => {
       return (
         <select
-          data-testid="project-select"
+          {...props}
           value={value}
           onChange={(e) => onValueChange?.(e.target.value)}
         >
@@ -84,6 +84,35 @@ jest.mock('@/components/ui/select', () => {
   };
 });
 
+jest.mock('../SearchAndAddSelector', () => ({
+  SearchAndAddSelector: ({ options, selected, onChange }: any) => (
+    <div data-testid="search-and-add-selector">
+      {selected.map((tag: string) => (
+        <span key={tag} data-testid={`tag-badge-${tag}`}>
+          {tag}
+          <button
+            data-testid={`remove-tag-${tag}`}
+            onClick={() => onChange(selected.filter((t: string) => t !== tag))}
+          >
+            ✖
+          </button>
+        </span>
+      ))}
+      {options
+        .filter((opt: string) => !selected.includes(opt))
+        .map((opt: string) => (
+          <button
+            key={opt}
+            data-testid={`add-tag-${opt}`}
+            onClick={() => onChange([...selected, opt])}
+          >
+            {opt}
+          </button>
+        ))}
+    </div>
+  ),
+}));
+
 jest.mock('../../BottomBar/BottomBar', () => {
   return jest.fn(() => <div>Mocked BottomBar</div>);
 });
@@ -319,7 +348,7 @@ describe('Tasks Component', () => {
   });
 
   describe('Task Dialog - Tags Editing', () => {
-    test('shows tags as badges in task dialog and allows editing (add on Enter)', async () => {
+    test('shows tags as badges in task dialog and allows editing', async () => {
       render(<Tasks {...mockProps} />);
 
       expect(await screen.findByText('Task 1')).toBeInTheDocument();
@@ -336,16 +365,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 () => {
@@ -363,14 +386,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 addTagButton = await screen.findByTestId('add-tag-tag2');
+      fireEvent.click(addTagButton);
 
       const saveButton = await screen.findByRole('button', {
         name: /save tags/i,
@@ -383,12 +400,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(['tag2']);
     });
 
     test('removes a tag while editing and saves updated tags to backend', async () => {
@@ -406,27 +419,15 @@ 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' });
+      await screen.findByRole('button', { name: /save tags/i });
 
-      expect(await screen.findByText('newtag')).toBeInTheDocument();
-
-      const tagBadge = screen.getByText('tag1');
-      const badgeContainer = (tagBadge.closest('div') ||
-        tagBadge.parentElement) as HTMLElement;
-
-      const removeButton = within(badgeContainer).getByText('✖');
+      const removeButton = screen.getByTestId('remove-tag-tag1');
       fireEvent.click(removeButton);
 
-      expect(screen.queryByText('tag2')).not.toBeInTheDocument();
-
       const saveButton = await screen.findByRole('button', {
         name: /save tags/i,
       });
+
       fireEvent.click(saveButton);
 
       await waitFor(() => {
@@ -435,11 +436,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(['-tag1']);
     });
 
     it('clicking checkbox does not open task detail dialog', async () => {
@@ -1175,7 +1174,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');
@@ -1243,17 +1242,15 @@ describe('Tasks Component', () => {
     const tagsLabel = screen.getByText('Tags:');
     const tagsRow = tagsLabel.closest('tr') as HTMLElement;
 
-    const editButton = within(tagsRow).getByLabelText('edit');
-    fireEvent.click(editButton);
-
-    const editInput = await screen.findByPlaceholderText(
-      'Add a tag (press enter to add)'
-    );
+    const pencilButton = within(tagsRow).getByRole('button');
+    fireEvent.click(pencilButton);
 
-    fireEvent.change(editInput, { target: { value: 'unsyncedtag' } });
-    fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
+    const removeButton = await screen.findByTestId('remove-tag-tag2');
+    fireEvent.click(removeButton);
 
-    const saveButton = screen.getByLabelText('Save tags');
+    const saveButton = await screen.findByRole('button', {
+      name: /save tags/i,
+    });
     fireEvent.click(saveButton);
 
     await waitFor(() => {
@@ -1282,7 +1279,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__/UseEditTask.test.ts b/frontend/src/components/HomeComponents/Tasks/__tests__/UseEditTask.test.ts
index efe2459e..a923c07a 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/UseEditTask.test.ts
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/UseEditTask.test.ts
@@ -33,7 +33,6 @@ describe('useEditTask Hook', () => {
       editedDescription: '',
       isEditingTags: false,
       editedTags: [],
-      editTagInput: '',
       isEditingPriority: false,
       editedPriority: 'NONE',
       isEditingProject: false,
diff --git a/frontend/src/components/utils/types.ts b/frontend/src/components/utils/types.ts
index 54d4482b..bb70c0a4 100644
--- a/frontend/src/components/utils/types.ts
+++ b/frontend/src/components/utils/types.ts
@@ -72,7 +72,6 @@ export interface EditTaskState {
   editedDescription: string;
   isEditingTags: boolean;
   editedTags: string[];
-  editTagInput: string;
   isEditingPriority: boolean;
   editedPriority: string;
   isEditingProject: boolean;
@@ -119,12 +118,11 @@ export interface AddTaskDialogProps {
   setIsOpen: (value: boolean) => void;
   newTask: TaskFormData;
   setNewTask: (task: TaskFormData) => void;
-  tagInput: string;
-  setTagInput: (value: string) => void;
   onSubmit: (task: TaskFormData) => void;
+  uniqueProjects: string[];
   isCreatingNewProject: boolean;
   setIsCreatingNewProject: (value: boolean) => void;
-  uniqueProjects: string[];
+  uniqueTags: string[];
   allTasks?: Task[];
 }
 
@@ -143,6 +141,7 @@ export interface EditTaskDialogProps {
   uniqueProjects: string[];
   isCreatingNewProject: boolean;
   setIsCreatingNewProject: (value: boolean) => void;
+  uniqueTags: string[];
   onSaveDescription: (task: Task, description: string) => void;
   onSaveTags: (task: Task, tags: string[]) => void;
   onSavePriority: (task: Task, priority: string) => void;