rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-06 20:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed problem where multiple tag dropdowns could be open at once.

Browse Source
This commit is contained in:
Nicholas 2024-04-15 00:43:35 -04:00
parent e3b31b0861
commit 316a986f33
2 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
compass/components/Table/Index.tsx
View File

@ -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</>,

51
compass/components/TagsInput/Index.tsx
View File

@ -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} />
) : (