diff --git a/src/components/presentational/HelpBox.jsx b/src/components/presentational/HelpBox.jsx index d3edc6d7f342435edda8eb2b9bc75530c5cb7bb5..a95168ab605fd182b1544e62029e52a489ba72d1 100644 --- a/src/components/presentational/HelpBox.jsx +++ b/src/components/presentational/HelpBox.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; function RasterVsVectorBox() { return ( @@ -50,6 +50,22 @@ export default function HelpBox({ isOpen, onClose }) { if(!isOpen) return null; const [showSubPopup, setShowSubPopup] = useState(null); + const popupRef = useRef(); + + useEffect(() => { + function handleClickOutside(event) { + if (event.target === popupRef.current) { + onClose(); + } + } + + if (isOpen) { + document.addEventListener('mousedown', handleClickOutside); + } + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [isOpen, onClose]); const handleRasterVsVectorClick = () => { setShowSubPopup('rasterVsVector'); @@ -64,7 +80,7 @@ export default function HelpBox({ isOpen, onClose }) { }; return ( - <div id="helpBoxBackground"> + <div id="helpBoxBackground" ref={popupRef}> <div className="helpBoxContent"> <h2>Help Menu</h2> <button className="helpButton" onClick={handleRasterVsVectorClick}>Raster vs Vector</button>