implement click outside post menu to close

src/components/views/Board.jsx

@@ -68,6 +68,8 @@ const Board = () => {
   const linkRef = useRef();
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
 
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
@@ -112,6 +114,25 @@ const Board = () => {
     setOpenMenuCid(null);
   };
 
+  const handleOutsideClick = (e) => {
+    if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
+      setOpenMenuCid(null);
+    }
+  };
+
+  useEffect(() => {
+    if (openMenuCid !== null) {
+      document.addEventListener('click', handleOutsideClick);
+    } else {
+      document.removeEventListener('click', handleOutsideClick);
+    }
+    
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [openMenuCid]);
+  
+  
 
   const errorString = useMemo(() => {
     if (subplebbit?.state === 'failed') {
@@ -829,10 +850,14 @@ const Board = () => {
                             <PostMenu 
                               key={`pmb-${index}`} 
                               title="Post menu"
-                              ref={el => threadMenuRefs.current[thread.cid] = el}
+                              ref={el => { 
+                                threadMenuRefs.current[thread.cid] = el; 
+                                postMenuRef.current = el; 
+                              }}
                               className='post-menu-button' 
                               rotated={openMenuCid === thread.cid}
-                              onClick={() => {
+                              onClick={(event) => {
+                                event.stopPropagation();
                                 const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
                                 setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
                                 setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
@@ -842,6 +867,8 @@ const Board = () => {
                             </PostMenu>
                             {createPortal(
                               <PostMenuCatalog selectedStyle={selectedStyle} 
+                              ref={el => {postMenuCatalogRef.current = el}}
+                              onClick={(event) => event.stopPropagation()}
                               style={{position: "absolute", 
                               top: menuPosition.top + 7, 
                               left: menuPosition.left}}>
@@ -1029,10 +1056,14 @@ const Board = () => {
                               <PostMenu 
                               key={`pmb-${index}`} 
                               title="Post menu"
-                              ref={el => replyMenuRefs.current[reply.cid] = el}
+                              ref={el => { 
+                                replyMenuRefs.current[reply.cid] = el; 
+                                postMenuRef.current = el; 
+                              }}
                               className='post-menu-button' 
                               rotated={openMenuCid === reply.cid}
-                              onClick={() => {
+                              onClick={(event) => {
+                                event.stopPropagation();
                                 const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
                                 setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
                                 setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid));
@@ -1042,6 +1073,8 @@ const Board = () => {
                             </PostMenu>
                             {createPortal(
                               <PostMenuCatalog selectedStyle={selectedStyle} 
+                              ref={el => {postMenuCatalogRef.current = el}}
+                              onClick={(event) => event.stopPropagation()}
                               style={{position: "absolute", 
                               top: menuPosition.top + 7, 
                               left: menuPosition.left}}>

src/components/views/Catalog.jsx

@@ -53,6 +53,8 @@ const Catalog = () => {
   const commentRef = useRef();
   const linkRef = useRef();
   const threadMenuRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
 
   const navigate = useNavigate();
   
@@ -101,6 +103,25 @@ const Catalog = () => {
     setOpenMenuCid(null);
   };
 
+  const handleOutsideClick = (e) => {
+    if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
+      setOpenMenuCid(null);
+    }
+  };
+
+  useEffect(() => {
+    if (openMenuCid !== null) {
+      document.addEventListener('click', handleOutsideClick);
+    } else {
+      document.removeEventListener('click', handleOutsideClick);
+    }
+    
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [openMenuCid]);
+  
+
 
   useEffect(() => {
     setSelectedAddress(subplebbitAddress);
@@ -683,11 +704,15 @@ const Catalog = () => {
                           zIndex: '999'}}
                           key={`pmb-${index}`} 
                           title="Post menu"
-                          ref={el => threadMenuRefs.current[thread.cid] = el}
+                          ref={el => { 
+                            threadMenuRefs.current[thread.cid] = el; 
+                            postMenuRef.current = el; 
+                          }}
                           className='post-menu-button' 
                           id='post-menu-button-catalog'
                           rotated={openMenuCid === thread.cid}
-                          onClick={() => {
+                          onClick={(event) => {
+                            event.stopPropagation();
                             const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
                             setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
                             setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
@@ -698,6 +723,8 @@ const Catalog = () => {
                         </div>
                         {createPortal(
                           <PostMenuCatalog selectedStyle={selectedStyle} 
+                            ref={el => {postMenuCatalogRef.current = el}}
+                            onClick={(event) => event.stopPropagation()}
                             style={{position: "absolute", 
                             top: menuPosition.top + 7, 
                             left: menuPosition.left}}>

src/components/views/Thread.jsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { confirmAlert } from 'react-confirm-alert';
@@ -9,6 +10,7 @@ import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/views/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
+import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
@@ -64,6 +66,8 @@ const Thread = () => {
   const linkRef = useRef();
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
 
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
@@ -75,10 +79,11 @@ const Thread = () => {
   const [originalCommentContent, setOriginalCommentContent] = useState(null);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
-  const [rotatedStates, setRotatedStates] = useState({});
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
   const [isModerator, setIsModerator] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
+  const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
+  const [openMenuCid, setOpenMenuCid] = useState(null);
   
   useError(errorMessage, [errorMessage]);
   useSuccess(successMessage, [successMessage]);
@@ -107,13 +112,28 @@ const Thread = () => {
   }, [account?.author.address, subplebbit.roles]);  
   
 
-  const handleOptionClick = (threadCid) => {
+  const handleOptionClick = () => {
-    setRotatedStates(prevState => ({
+    setOpenMenuCid(null);
-      ...prevState,
-      [threadCid]: false
-    }));
   };
 
+  const handleOutsideClick = (e) => {
+    if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
+      setOpenMenuCid(null);
+    }
+  };
+
+  useEffect(() => {
+    if (openMenuCid !== null) {
+      document.addEventListener('click', handleOutsideClick);
+    } else {
+      document.removeEventListener('click', handleOutsideClick);
+    }
+    
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [openMenuCid]);
+
   
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -790,28 +810,34 @@ const Thread = () => {
                         <PostMenu 
                           key={`pmb-${index}`} 
                           title="Post menu"
-                          ref={el => threadMenuRefs.current[comment.cid] = el}
+                          ref={el => { 
+                            threadMenuRefs.current[comment.cid] = el; 
+                            postMenuRef.current = el; 
+                          }}
                           className='post-menu-button' 
-                          rotated={rotatedStates[comment.cid]}
+                          rotated={openMenuCid === comment.cid}
-                          onClick={() => {
+                          onClick={(event) => {
+                            event.stopPropagation();
                             const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
-                            const menu = document.querySelector(`.post-menu-thread-${comment.cid}`);
+                            setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
-                            menu.style.top = `calc(${rect.top + window.scrollY}px + 17px)`;
+                            setOpenMenuCid(prevCid => (prevCid === comment.cid ? null : comment.cid));
-                            menu.style.left = `${rect.left}px`;
-                          
-                            setRotatedStates(prevState => ({
-                              ...prevState,
-                              [comment.cid]: !prevState[comment.cid]
-                            }));
                           }}                              
                         >
                           ▶
                         </PostMenu>
-                        <div id="post-menu" className={`post-menu-thread post-menu-thread-${comment.cid}`}
+                        {createPortal(
-                          style={{ display: rotatedStates[comment.cid] ? 'block' : 'none' }}>
+                          <PostMenuCatalog selectedStyle={selectedStyle} 
-                          <ul>
+                          ref={el => {postMenuCatalogRef.current = el}}
+                          onClick={(event) => event.stopPropagation()}
+                          style={{position: "absolute", 
+                          top: menuPosition.top + 7, 
+                          left: menuPosition.left}}>
+                          <div className={`post-menu-thread post-menu-thread-${comment.cid}`}
+                          style={{ display: openMenuCid === comment.cid ? 'block' : 'none' }}
+                          >
+                            <ul className="post-menu-catalog">
                               <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
-                            {comment?.author?.shortAddress === account?.author?.shortAddress ? (
+                              {comment.author.shortAddress === account?.author.shortAddress ? (
                                 <>
                                   <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
                                   <li onClick={() => handleAuthorDeleteClick(comment.cid)}>Delete post</li>
@@ -819,7 +845,7 @@ const Thread = () => {
                               ) : null}
                               {isModerator ? (
                                 <>
-                                {comment?.author?.shortAddress === account?.author?.shortAddress ? (
+                                  {comment.author.shortAddress === account?.author.shortAddress ? (
                                     null
                                   ) : (
                                     <li onClick={() => {
@@ -875,6 +901,8 @@ const Thread = () => {
                               }
                             </ul>
                           </div>
+                          </PostMenuCatalog>, document.body
+                        )}
                         <div id="backlink-id" className="backlink">
                           {comment?.replies?.pages?.topAll.comments
                             .sort((a, b) => a.timestamp - b.timestamp)
@@ -962,28 +990,34 @@ const Thread = () => {
                             <PostMenu 
                               key={`pmb-${index}`} 
                               title="Post menu"
-                              ref={el => replyMenuRefs.current[reply.cid] = el}
+                              ref={el => { 
+                                replyMenuRefs.current[reply.cid] = el; 
+                                postMenuRef.current = el; 
+                              }}
                               className='post-menu-button' 
-                              rotated={rotatedStates[reply.cid]}
+                              rotated={openMenuCid === reply.cid}
-                              onClick={() => {
+                              onClick={(event) => {
+                                event.stopPropagation();
                                 const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
-                                const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
+                                setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
-                                menu.style.top = `calc(${rect.top + window.scrollY}px + 17px)`;
+                                setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid));
-                                menu.style.left = `${rect.left}px`;
-                              
-                                setRotatedStates(prevState => ({
-                                  ...prevState,
-                                  [reply.cid]: !prevState[reply.cid]
-                                }));
                               }} 
                             >
                               ▶
                             </PostMenu>
-                            <div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
+                            {createPortal(
-                              style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
+                              <PostMenuCatalog selectedStyle={selectedStyle} 
-                              <ul>
+                              ref={el => {postMenuCatalogRef.current = el}}
+                              onClick={(event) => event.stopPropagation()}
+                              style={{position: "absolute", 
+                              top: menuPosition.top + 7, 
+                              left: menuPosition.left}}>
+                              <div className={`post-menu-reply post-menu-reply-${reply.cid}`}
+                              style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
+                              >
+                                <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
-                                {reply.author.shortAddress === account?.author?.shortAddress ? (
+                                  {reply.author.shortAddress === account?.author.shortAddress ? (
                                     <>
                                       <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
                                       <li onClick={() => handleAuthorDeleteClick(reply.cid)}>Delete post</li>
@@ -991,7 +1025,7 @@ const Thread = () => {
                                   ) : null}
                                   {isModerator ? (
                                     <>
-                                    {reply.author.shortAddress === account?.author?.shortAddress ? (
+                                      {reply.author.shortAddress === account?.author.shortAddress ? (
                                         null
                                       ) : (
                                         <li onClick={() => {
@@ -1025,19 +1059,19 @@ const Thread = () => {
                                           style={{display: isImageSearchOpen ? 'block': 'none'}}>
                                           <li onClick={() => handleOptionClick(reply.cid)}>
                                             <a 
-                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                            href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
                                             target="_blank" rel="noreferrer"
                                             >Google</a>
                                           </li>
                                           <li onClick={() => handleOptionClick(reply.cid)}>
                                             <a
-                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                            href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
                                             target="_blank" rel="noreferrer"
                                             >Yandex</a>
                                           </li>
                                           <li onClick={() => handleOptionClick(reply.cid)}>
                                             <a
-                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                            href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
                                             target="_blank" rel="noreferrer"
                                             >SauceNAO</a>
                                           </li>
@@ -1047,6 +1081,8 @@ const Thread = () => {
                                   }
                                 </ul>
                               </div>
+                              </PostMenuCatalog>, document.body
+                            )}
                             <div id="backlink-id" className="backlink">
                               {reply.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)