From e93a2417b774bb15c42633ff2ca96f118cf1a343 Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Wed, 28 Sep 2022 16:27:26 +0200
Subject: [PATCH] close popup when click outside

---
 client/src/components/PopupMessage.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/src/components/PopupMessage.tsx b/client/src/components/PopupMessage.tsx
index 71c501d..1f6f1af 100644
--- a/client/src/components/PopupMessage.tsx
+++ b/client/src/components/PopupMessage.tsx
@@ -1,9 +1,20 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FaEllipsisH } from 'react-icons/fa';
 
 const PopupMessage = ({ id }: { id: string }) => {
   const [show, setShow] = useState(false);
 
+  useEffect(() => {
+    const handleClick = (e: any) => {
+      console.log(show && e.target.closest('.popup-btn'));
+      if ((show && !e.target.closest('.popup-btn') || (e.target.closest('.popup') && !e.target.closest('.popup-btn')))) {
+        setShow(false);
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+  }, [id]);
+
   return (
     <>
       <div className="bg-grey-dark">