From bc636c7f364fb075667c866859a2e8ba115dfec4 Mon Sep 17 00:00:00 2001
From: BrittainJackson7 <brittainjackson7@gmail.com>
Date: Fri, 10 Nov 2023 10:08:29 -0700
Subject: [PATCH] update help box to close when clicked off
---
src/components/presentational/HelpBox.jsx | 20 ++++++++++++++++++--
1 file changed, 18 insertions(+), 2 deletions(-)
diff --git a/src/components/presentational/HelpBox.jsx b/src/components/presentational/HelpBox.jsx
index d3edc6d7f..a95168ab6 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>
--
GitLab