hide reacts when clicked outside

src/components/comments.js

@@ -207,8 +207,8 @@ export default function Comments({
           ) : null}
         </Modal>
       ) : null}
-      <div
-        className={'actions'}
+      <div className={'actions'}>
+        <span
           onClick={() => {
             setCommentsShowing(true)
             if (commentCount === 0) {
@@ -216,7 +216,6 @@ export default function Comments({
             }
           }}
         >
-        <span>
           {commentCount === 0
             ? 'New comment'
             : `Show ${commentCount} comment${commentCount > 1 ? 's' : ''}`}

src/components/reactButton.js

@@ -1,10 +1,25 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 
 import Tooltip from './tooltip.js'
 
 import styles from './reactButton.module.css'
 import reactions from '../data/reactions.json'
 
+function useOutsideAlerter(ref, action) {
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        action()
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [ref])
+}
+
 function ExistingReacts({ existingReacts, onClick, uid }) {
   return (
     <div className={styles.reactionContainer}>
@@ -69,6 +84,10 @@ function RenderEmojis({ onClick }) {
 
 export default function ReactButton({ onClick, existingReacts, uid }) {
   const [opened, setOpened] = useState(false)
+  const wrapperRef = useRef(null)
+  useOutsideAlerter(wrapperRef, () => {
+    setOpened(false)
+  })
 
   return (
     <div
@@ -77,7 +96,7 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
         setOpened(true)
       }}
       onMouseLeave={() => {
-        setOpened(false)
+        // setOpened(false)
       }}
     >
       <Tooltip
@@ -93,7 +112,7 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
           />
         )}
       >
-        <div className={styles.reactionContainer}>
+        <div ref={wrapperRef} className={styles.reactionContainer}>
           <RenderEmojis
             onClick={(e) => {
               // setOpened(false)