diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx index 7ae393e..7e3b26f 100644 --- a/compass/components/TagsInput/Index.tsx +++ b/compass/components/TagsInput/Index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect, useRef } from "react"; import "tailwindcss/tailwind.css"; import { TagsArray } from "./TagsArray"; import { TagDropdown } from "./TagDropdown"; @@ -18,6 +18,25 @@ const TagsInput: React.FC = ({ new Set(presetValue ? [presetValue] : []) ); const [options, setOptions] = useState>(new Set(presetOptions)); + const dropdown = useRef(null); + + useEffect(() => { + console.log(cellSelected); + if (!cellSelected) { + return; + } + function handleClick(event: MouseEvent) { + if (dropdown.current && !dropdown.current.contains(event.target as Node)) { + setCellSelected(false); + } + } + + if (cellSelected){ + window.addEventListener("click", handleClick); + } + + return () => window.removeEventListener("click", handleClick); + }, [cellSelected]) const handleInputChange = (e: React.ChangeEvent) => { setOptions(() => { @@ -85,10 +104,14 @@ const TagsInput: React.FC = ({ return ( -
setCellSelected(true)}> +
{ + e.stopPropagation(); + setCellSelected(true) + }}> {!cellSelected ? ( ) : ( +
@@ -117,6 +140,7 @@ const TagsInput: React.FC = ({
+
)}
);