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});
@@ -111,6 +113,25 @@ const Board = () => {
   const handleOptionClick = () => {
     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(() => {
@@ -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,19 +1056,25 @@ 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));
-                              }}                              
+                              }} 
                             >
                               ▶
                             </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,91 +810,99 @@ 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}}
-                            <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
+                          onClick={(event) => event.stopPropagation()}
-                            {comment?.author?.shortAddress === account?.author?.shortAddress ? (
+                          style={{position: "absolute", 
-                              <>
+                          top: menuPosition.top + 7, 
-                                <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
+                          left: menuPosition.left}}>
-                                <li onClick={() => handleAuthorDeleteClick(comment.cid)}>Delete post</li>
+                          <div className={`post-menu-thread post-menu-thread-${comment.cid}`}
-                              </>
+                          style={{ display: openMenuCid === comment.cid ? 'block' : 'none' }}
-                            ) : null}
+                          >
-                            {isModerator ? (
+                            <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 ? (
-                                  null
+                                <>
-                                ) : (
+                                  <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
-                                  <li onClick={() => {
+                                  <li onClick={() => handleAuthorDeleteClick(comment.cid)}>Delete post</li>
+                                </>
+                              ) : null}
+                              {isModerator ? (
+                                <>
+                                  {comment.author.shortAddress === account?.author.shortAddress ? (
+                                    null
+                                  ) : (
+                                    <li onClick={() => {
+                                      setModeratingCommentCid(comment.cid)
+                                      setIsModerationOpen(true); 
+                                      handleOptionClick(comment.cid);
+                                      setDeletePost(true);
+                                    }}>
+                                    Delete post
+                                    </li>
+                                  )}
+                                  <li
+                                  onClick={() => {
                                     setModeratingCommentCid(comment.cid)
                                     setIsModerationOpen(true); 
                                     handleOptionClick(comment.cid);
-                                    setDeletePost(true);
                                   }}>
-                                  Delete post
+                                    Mod tools
                                   </li>
-                                )}
+                                </>
-                                <li
+                              ) : null}
-                                onClick={() => {
+                              {(commentMediaInfo && (
-                                  setModeratingCommentCid(comment.cid)
+                                commentMediaInfo.type === 'image' || 
-                                  setIsModerationOpen(true); 
+                                (commentMediaInfo.type === 'webpage' && 
-                                  handleOptionClick(comment.cid);
+                                commentMediaInfo.thumbnail))) ? ( 
-                                }}>
+                                  <li 
-                                  Mod tools
+                                  onMouseOver={() => {setIsImageSearchOpen(true)}}
-                                </li>
+                                  onMouseLeave={() => {setIsImageSearchOpen(false)}}>
-                              </>
+                                    Image search »
-                            ) : null}
+                                    <ul className="dropdown-menu"
-                            {(commentMediaInfo && (
+                                      style={{display: isImageSearchOpen ? 'block': 'none'}}>
-                              commentMediaInfo.type === 'image' || 
+                                      <li onClick={() => handleOptionClick(comment.cid)}>
-                              (commentMediaInfo.type === 'webpage' && 
+                                        <a 
-                              commentMediaInfo.thumbnail))) ? ( 
+                                        href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
-                                <li 
+                                        target="_blank" rel="noreferrer"
-                                onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                        >Google</a>
-                                onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                      </li>
-                                  Image search »
+                                      <li onClick={() => handleOptionClick(comment.cid)}>
-                                  <ul className="dropdown-menu"
+                                        <a
-                                    style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                        href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
-                                    <li onClick={() => handleOptionClick(comment.cid)}>
+                                        target="_blank" rel="noreferrer"
-                                      <a 
+                                        >Yandex</a>
-                                      href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                      </li>
-                                      target="_blank" rel="noreferrer"
+                                      <li onClick={() => handleOptionClick(comment.cid)}>
-                                      >Google</a>
+                                        <a
-                                    </li>
+                                        href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
-                                    <li onClick={() => handleOptionClick(comment.cid)}>
+                                        target="_blank" rel="noreferrer"
-                                      <a
+                                        >SauceNAO</a>
-                                      href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                      </li>
-                                      target="_blank" rel="noreferrer"
+                                    </ul>
-                                      >Yandex</a>
+                                  </li>
-                                    </li>
+                                ) : null
-                                    <li onClick={() => handleOptionClick(comment.cid)}>
+                              }
-                                      <a
+                            </ul>
-                                      href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                          </div>
-                                      target="_blank" rel="noreferrer"
+                          </PostMenuCatalog>, document.body
-                                      >SauceNAO</a>
+                        )}
-                                    </li>
-                                  </ul>
-                                </li>
-                              ) : null
-                            }
-                          </ul>
-                        </div>
                         <div id="backlink-id" className="backlink">
                           {comment?.replies?.pages?.topAll.comments
                             .sort((a, b) => a.timestamp - b.timestamp)
@@ -962,91 +990,99 @@ 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}}
-                                <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
+                              onClick={(event) => event.stopPropagation()}
-                                {reply.author.shortAddress === account?.author?.shortAddress ? (
+                              style={{position: "absolute", 
-                                  <>
+                              top: menuPosition.top + 7, 
-                                    <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
+                              left: menuPosition.left}}>
-                                    <li onClick={() => handleAuthorDeleteClick(reply.cid)}>Delete post</li>
+                              <div className={`post-menu-reply post-menu-reply-${reply.cid}`}
-                                  </>
+                              style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
-                                ) : null}
+                              >
-                                {isModerator ? (
+                                <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 ? (
-                                      null
+                                    <>
-                                    ) : (
+                                      <li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
-                                      <li onClick={() => {
+                                      <li onClick={() => handleAuthorDeleteClick(reply.cid)}>Delete post</li>
+                                    </>
+                                  ) : null}
+                                  {isModerator ? (
+                                    <>
+                                      {reply.author.shortAddress === account?.author.shortAddress ? (
+                                        null
+                                      ) : (
+                                        <li onClick={() => {
+                                          setModeratingCommentCid(reply.cid)
+                                          setIsModerationOpen(true); 
+                                          handleOptionClick(reply.cid);
+                                          setDeletePost(true);
+                                        }}>
+                                        Delete post
+                                        </li>
+                                      )}
+                                      <li
+                                      onClick={() => {
                                         setModeratingCommentCid(reply.cid)
                                         setIsModerationOpen(true); 
                                         handleOptionClick(reply.cid);
-                                        setDeletePost(true);
                                       }}>
-                                      Delete post
+                                        Mod tools
                                       </li>
-                                    )}
+                                    </>
-                                    <li
+                                  ) : null}
-                                    onClick={() => {
+                                  {(replyMediaInfo && (
-                                      setModeratingCommentCid(reply.cid)
+                                    replyMediaInfo.type === 'image' || 
-                                      setIsModerationOpen(true); 
+                                    (replyMediaInfo.type === 'webpage' && 
-                                      handleOptionClick(reply.cid);
+                                    replyMediaInfo.thumbnail))) ? ( 
-                                    }}>
+                                      <li 
-                                      Mod tools
+                                      onMouseOver={() => {setIsImageSearchOpen(true)}}
-                                    </li>
+                                      onMouseLeave={() => {setIsImageSearchOpen(false)}}>
-                                  </>
+                                        Image search »
-                                ) : null}
+                                        <ul className="dropdown-menu"
-                                {(replyMediaInfo && (
+                                          style={{display: isImageSearchOpen ? 'block': 'none'}}>
-                                  replyMediaInfo.type === 'image' || 
+                                          <li onClick={() => handleOptionClick(reply.cid)}>
-                                  (replyMediaInfo.type === 'webpage' && 
+                                            <a 
-                                  replyMediaInfo.thumbnail))) ? ( 
+                                            href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
-                                    <li 
+                                            target="_blank" rel="noreferrer"
-                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                            >Google</a>
-                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                          </li>
-                                      Image search »
+                                          <li onClick={() => handleOptionClick(reply.cid)}>
-                                      <ul className="dropdown-menu"
+                                            <a
-                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                            href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
-                                        <li onClick={() => handleOptionClick(reply.cid)}>
+                                            target="_blank" rel="noreferrer"
-                                          <a 
+                                            >Yandex</a>
-                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                          </li>
-                                          target="_blank" rel="noreferrer"
+                                          <li onClick={() => handleOptionClick(reply.cid)}>
-                                          >Google</a>
+                                            <a
-                                        </li>
+                                            href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
-                                        <li onClick={() => handleOptionClick(reply.cid)}>
+                                            target="_blank" rel="noreferrer"
-                                          <a
+                                            >SauceNAO</a>
-                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                          </li>
-                                          target="_blank" rel="noreferrer"
+                                        </ul>
-                                          >Yandex</a>
+                                      </li>
-                                        </li>
+                                    ) : null
-                                        <li onClick={() => handleOptionClick(reply.cid)}>
+                                  }
-                                          <a
+                                </ul>
-                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                              </div>
-                                          target="_blank" rel="noreferrer"
+                              </PostMenuCatalog>, document.body
-                                          >SauceNAO</a>
+                            )}
-                                        </li>
-                                      </ul>
-                                    </li>
-                                  ) : null
-                                }
-                              </ul>
-                            </div>
                             <div id="backlink-id" className="backlink">
                               {reply.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)