diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index 7b5ee92..5e1f49b 100644
--- a/compass/components/Table/Index.tsx
+++ b/compass/components/Table/Index.tsx
@@ -8,7 +8,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { RowOptionMenu } from "./RowOptionMenu";
 import { RowOpenAction } from "./RowOpenAction";
 import { TableAction } from "./TableAction";
@@ -32,6 +32,8 @@ type User = {
 
 export const Table = () => {
   const columnHelper = createColumnHelper<User>();
+
+
   const columns = [
     columnHelper.display({
       id: "options",
@@ -42,7 +44,8 @@ export const Table = () => {
       cell: (info) => <RowOpenAction title={info.getValue()} />,
     }),
     columnHelper.accessor("role", {
-      cell: (info) => <TagsInput presetValue={info.getValue() }presetOptions={["administrator","volunteer","employee"]}  />,
+      cell: (info) => <TagsInput presetValue={info.getValue() }
+      presetOptions={["administrator","volunteer","employee"]}/>,
     }),
     columnHelper.accessor("email", {
       header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>,
diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx
index 7e3b26f..6590a88 100644
--- a/compass/components/TagsInput/Index.tsx
+++ b/compass/components/TagsInput/Index.tsx
@@ -20,23 +20,41 @@ const TagsInput: React.FC<TagsInputProps> = ({
   const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
   const dropdown = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    console.log(cellSelected);
+  // useEffect(() => {
+  //   if (!cellSelected) {
+  //     return;
+  //   }
+  //   function handleOutsideClick(event: MouseEvent) {
+  //     if (dropdown.current && !dropdown.current.contains(event.target as Node)) {
+  //       console.log("here2")
+  //       setCellSelected(false);
+  //     }
+  //   }
+
+  //   if (cellSelected){
+  //     window.addEventListener("click", handleOutsideClick);
+  //   }
+
+  //   return () => window.removeEventListener("click", handleOutsideClick);
+  // }, [cellSelected])
+
+  const handleClick = () => {
     if (!cellSelected) {
-      return;
-    }
-    function handleClick(event: MouseEvent) {
-      if (dropdown.current && !dropdown.current.contains(event.target as Node)) {
-        setCellSelected(false);
-      }
+      setCellSelected(true);
+      // Add event listener only after setting cellSelected to true
+      setTimeout(() => {
+        window.addEventListener("click", handleOutsideClick);
+      }, 100);
     }
+  }
 
-    if (cellSelected){
-      window.addEventListener("click", handleClick);
+  const handleOutsideClick = (event) => {
+    if (dropdown.current && !dropdown.current.contains(event.target)) {
+      setCellSelected(false);
+      // Remove event listener after handling outside click
+      window.removeEventListener("click", handleOutsideClick);
     }
-
-    return () => window.removeEventListener("click", handleClick);
-  }, [cellSelected])
+  };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setOptions(() => {
@@ -100,14 +118,9 @@ const TagsInput: React.FC<TagsInputProps> = ({
       });
     }
   };
-  
-
 
   return (
-    <div className="cursor-pointer" onClick={(e) => {
-      e.stopPropagation();
-      setCellSelected(true)
-    }}>
+    <div className="cursor-pointer" onClick={handleClick}>
       {!cellSelected ? (
         <TagsArray handleDelete={handleDeleteTag} tags={tags} />
       ) : (