adding state to keep track of the obs dialog that has focus

RENCI · Oct 31, 2024 · c3cb387 · c3cb387
1 parent d6ea355
commit c3cb387
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useRef, forwardRef } from 'react';
+import React, { Fragment, useState, useRef, forwardRef, useEffect } from 'react';
 import { ToggleButtonGroup, ToggleButton, Box, Stack, Typography,
     CssBaseline, Dialog, DialogContent, DialogTitle, Paper, Slide, IconButton} from '@mui/material';
 import Draggable from "react-draggable";
@@ -8,7 +8,8 @@ import "react-resizable/css/styles.css";
 
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 
-import { markUnclicked } from '@utils/map-utils';
+import {markUnclicked} from '@utils/map-utils';
+import {useLayers} from "@context";
 
 // define the properties of this component's input
 BaseFloatingDialog.propTypes = {
@@ -48,6 +49,11 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
     const minHeight = 175;
     const maxHeight = 500;
 
+    // get the context for the compare layers view
+    const {
+        topMostDialogIndex, setTopMostDialogIndex
+    } = useLayers();
+
     /**
     * the close dialog handler
     */
@@ -62,6 +68,22 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
         }
     };
 
+    /**
+     * handles a click on the dialog to make it have focus
+     */
+    const handleClick = () => {
+        // set the new topmost dialog in the stack
+        setTopMostDialogIndex(index);
+    };
+
+    /**
+     * Runs when the dialog is created to make it have focus
+     */
+    useEffect( () => {
+        // set the focus on this dialog
+        setTopMostDialogIndex(index);
+    }, [] );
+
     /**
     * configure and render the resizeable floating dialog
     */
@@ -79,15 +101,16 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
                 axis="x"
                 draggableOpts={{ handleSize: [20, 20] }}>
                 <Dialog
+                    onClick={ handleClick }
+                    onClose={ handleClose }
                     aria-labelledby="draggable-dialog"
                     open={ true }
-                    onClose={ handleClose }
                     PaperComponent={ PaperComponent }
                     TransitionComponent={ Transition }
                     disableEnforceFocus
                     style={{ pointerEvents: 'none' }}
-                    PaperProps={{left: index * 20, top: index * 35, sx: { pointerEvents: 'auto' } }}
-                    sx={{ ml: 6, zIndex: 999, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}>
+                    PaperProps={{left: index * 45, top: index * 35, sx: { pointerEvents: 'auto' } }}
+                    sx={{ ml: 6, zIndex: (index===topMostDialogIndex) ? 1000 : 999, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}>
 
                     <DialogTitle
                         id="draggable-dialog"

diff --git a/src/context/map-context.js b/src/context/map-context.js
@@ -62,6 +62,9 @@ export const LayersProvider = ({ children }) => {
   // state to capture the default startup instance name
   const [defaultInstanceName, setDefaultInstanceName] = useState(null);
 
+  // state to keep track of the obs dialog that has focus
+  const [topMostDialogIndex, setTopMostDialogIndex] = useState(0);
+
   /**
    * this section is for the side-by-side compare mode items
    * @type {string}
@@ -406,7 +409,10 @@ export const LayersProvider = ({ children }) => {
         rightLayerProps, setRightLayerProps,
         selectedRightLayer, setSelectedRightLayer,
         sideBySideLayers, setSideBySideLayers,
-        resetCompare, removeSideBySideLayers
+        resetCompare, removeSideBySideLayers,
+
+        // tracks the dialog that has focus
+        topMostDialogIndex, setTopMostDialogIndex
       }}
     >
       {children}