From 316a986f33a17ff4644d9f03df8eefe2e9f5dc60 Mon Sep 17 00:00:00 2001
From: Nicholas <nsanaie@unc.edu>
Date: Mon, 15 Apr 2024 00:43:35 -0400
Subject: [PATCH] fixed problem where multiple tag dropdowns could be open at
once.
---
compass/components/Table/Index.tsx | 7 +++-
compass/components/TagsInput/Index.tsx | 51 ++++++++++++++++----------
2 files changed, 37 insertions(+), 21 deletions(-)
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} />
) : (