From 2ed82a770a8719b0296fee74901483e89d46c67c Mon Sep 17 00:00:00 2001
From: marshennikovaolga <marshennikova@gmail.com>
Date: Sun, 11 Aug 2024 14:34:54 +0300
Subject: [PATCH] topic learning status outsideclick closing

---
 .../routes/globalTopic/globalTopic.tsx        | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/components/routes/globalTopic/globalTopic.tsx b/web/components/routes/globalTopic/globalTopic.tsx
index f0a021c4..e19a2790 100644
--- a/web/components/routes/globalTopic/globalTopic.tsx
+++ b/web/components/routes/globalTopic/globalTopic.tsx
@@ -1,5 +1,5 @@
 "use client"
-import React, { useState } from "react"
+import { useState, useEffect, useRef } from "react"
 import { ContentHeader } from "@/components/custom/content-header"
 import { PiLinkSimple } from "react-icons/pi"
 import { Bookmark, GraduationCap, Check } from "lucide-react"
@@ -55,8 +55,21 @@ export default function GlobalTopic({ topic }: { topic: string }) {
 	const [showOptions, setShowOptions] = useState(false)
 	const [selectedOption, setSelectedOption] = useState<string | null>(null)
 	const [activeTab, setActiveTab] = useState("Guide")
-
 	const decodedTopic = decodeURIComponent(topic)
+	const learningStatusRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		function handleClickOutside(event: MouseEvent) {
+			if (learningStatusRef.current && !learningStatusRef.current.contains(event.target as Node)) {
+				setShowOptions(false)
+			}
+		}
+
+		document.addEventListener("mousedown", handleClickOutside)
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside)
+		}
+	}, [])
 
 	const learningOptions = [
 		{ text: "To Learn", icon: <Bookmark size={18} /> },
@@ -123,7 +136,10 @@ export default function GlobalTopic({ topic }: { topic: string }) {
 						{selectedOption || "Add to my profile"}
 					</Button>
 					{showOptions && (
-						<div className="absolute left-1/2 mt-1 w-40 -translate-x-1/2 rounded-lg bg-neutral-800 shadow-lg">
+						<div
+							ref={learningStatusRef}
+							className="absolute left-1/2 mt-1 w-40 -translate-x-1/2 rounded-lg bg-neutral-800 shadow-lg"
+						>
 							{learningOptions.map(option => (
 								<Button
 									key={option.text}