New options now display on all rows

compass/components/Table/Index.tsx

@@ -32,7 +32,11 @@ type User = {
 
 export const Table = () => {
   const columnHelper = createColumnHelper<User>();
+  const [presetOptions, setPresetOptions] = useState(["administrator", "volunteer", "employee"]);
 
+  const handleAddTag = (newTag) => {
+    setPresetOptions((prevOptions) => [...prevOptions, newTag]);
+  }
 
   const columns = [
     columnHelper.display({
@@ -45,7 +49,9 @@ export const Table = () => {
     }),
     columnHelper.accessor("role", {
       cell: (info) => <TagsInput presetValue={info.getValue() }
-      presetOptions={["administrator","volunteer","employee"]}/>,
+      presetOptions={presetOptions}
+      addOption={handleAddTag}
+      />,
     }),
     columnHelper.accessor("email", {
       header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>,

compass/components/TagsInput/Index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useRef } from "react";
 import "tailwindcss/tailwind.css";
 import { TagsArray } from "./TagsArray"; 
 import { TagDropdown } from "./TagDropdown";
@@ -11,6 +11,7 @@ interface TagsInputProps {
 const TagsInput: React.FC<TagsInputProps> = ({
   presetValue,
   presetOptions,
+  addOption,
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [cellSelected, setCellSelected] = useState(false);
@@ -20,24 +21,6 @@ const TagsInput: React.FC<TagsInputProps> = ({
   const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
   const dropdown = useRef<HTMLDivElement>(null);
 
-  // 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) {
       setCellSelected(true);
@@ -63,8 +46,10 @@ const TagsInput: React.FC<TagsInputProps> = ({
     })
     setInputValue(e.target.value); // Update input value state
   };
+
   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && inputValue.trim()) {
+      addOption(inputValue);
       setTags((prevTags) => new Set(prevTags).add(inputValue));
       setOptions((prevOptions) => new Set(prevOptions).add(inputValue));
       setInputValue("");

compass/components/TagsInput/Tag.tsx

@@ -1,4 +1,5 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
+import React, { useState } from "react";
 
 export const Tag = ({ children, handleDelete, active = false }) => {
 
@@ -12,4 +13,4 @@ export const Tag = ({ children, handleDelete, active = false }) => {
       )}
     </span>
   );
-};
+};