From 49f386ef2cd2f90ffc22f205c559da59af93a79f Mon Sep 17 00:00:00 2001 From: mohitb35 <44917347+mohitb35@users.noreply.github.com> Date: Fri, 31 Jan 2025 14:54:15 +0700 Subject: [PATCH] fix: resolve erratic popover behavior in MapFeatureExplorer --- .../MapFeatureExplorer.module.scss | 13 ++- .../microComponents/SingleLayerOption.tsx | 82 +++++++++++-------- 2 files changed, 56 insertions(+), 39 deletions(-) diff --git a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss index e5881da30..19e4e2944 100644 --- a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss +++ b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss @@ -88,9 +88,16 @@ border-bottom: none; } - .layerLabel.additionalInfo p { - text-decoration: $horizontalLineColor dashed underline; - text-underline-offset: 2px; + .layerLabel { + cursor: default; + + &.additionalInfo { + cursor: help; + p { + text-decoration: $horizontalLineColor dashed underline; + text-underline-offset: 2px; + } + } } .mapLayer { diff --git a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/SingleLayerOption.tsx b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/SingleLayerOption.tsx index 5d060f0d5..56f0c532f 100644 --- a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/SingleLayerOption.tsx +++ b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/SingleLayerOption.tsx @@ -1,6 +1,7 @@ import type { LayerConfig } from '../../../../../utils/mapsV2/mapSettings.config'; +import type { MouseEvent } from 'react'; -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import { useTranslations } from 'next-intl'; import { Popover } from '@mui/material'; import LayerInfoPopupContent from './LayerInfoPopupContent'; @@ -9,49 +10,57 @@ import styles from '../MapFeatureExplorer.module.scss'; interface Props { layerConfig: LayerConfig; - /* label: string; - switchComponent: ReactNode; - showDivider: boolean; - additionalInfo?: AdditionalInfo; */ } const SingleLayerOption = ({ layerConfig }: Props) => { const tExplore = useTranslations('Maps.exploreLayers'); const hasInfoPopover = layerConfig.additionalInfo !== undefined; - - if (!layerConfig.isAvailable) return <></>; - const [anchor, setAnchor] = useState<HTMLDivElement | null>(null); - const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => { - e.preventDefault(); - setAnchor(e.currentTarget); - }; + if (!layerConfig.isAvailable) return null; + + const handleMouseEnter = useCallback( + (e: React.MouseEvent<HTMLParagraphElement>) => { + setAnchor(e.currentTarget); + }, + [] + ); - const handleMouseLeave = () => { + const handleClose = () => { setAnchor(null); }; + const handleMouseLeave = useCallback((e: MouseEvent) => { + const relatedTarget = e.relatedTarget as HTMLElement; + const isMovingToPopover = relatedTarget?.closest('[role="presentation"]'); + + if (!isMovingToPopover) { + handleClose(); + } + }, []); + return ( - <> - <div className={styles.singleLayerOption}> - <div - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - className={`${styles.layerLabel} ${ - hasInfoPopover ? styles.additionalInfo : '' - }`} + <div className={styles.singleLayerOption}> + <div + className={`${styles.layerLabel} ${ + hasInfoPopover ? styles.additionalInfo : '' + }`} + > + <p + onMouseEnter={hasInfoPopover ? handleMouseEnter : undefined} + onMouseLeave={hasInfoPopover ? handleMouseLeave : undefined} > - <p>{tExplore(`settingsLabels.${layerConfig.key}`)}</p> - </div> - <div className={styles.switchContainer}> - <StyledSwitch customColor={layerConfig.color} /> - </div> + {tExplore(`settingsLabels.${layerConfig.key}`)} + </p> </div> + <div className={styles.switchContainer}> + <StyledSwitch customColor={layerConfig.color} /> + </div> + {hasInfoPopover && ( <Popover open={Boolean(anchor)} - onClose={() => setAnchor(null)} + onClose={handleClose} anchorEl={anchor} anchorOrigin={{ vertical: 'top', @@ -63,23 +72,24 @@ const SingleLayerOption = ({ layerConfig }: Props) => { }} disableRestoreFocus sx={{ - pointerEvents: 'auto', // Enable pointer events '& .MuiPaper-root': { borderRadius: '12px', marginTop: '-8px', - pointerEvents: 'auto', // Ensure interaction inside Popover works }, }} + onMouseLeave={handleClose} > - <LayerInfoPopupContent - anchorElement={anchor} - setAnchorElement={setAnchor} - additionalInfo={layerConfig.additionalInfo} - handleMouseLeave={handleMouseLeave} - /> + <div onMouseEnter={(e) => e.stopPropagation()}> + <LayerInfoPopupContent + anchorElement={anchor} + setAnchorElement={setAnchor} + additionalInfo={layerConfig.additionalInfo} + handleMouseLeave={handleClose} + /> + </div> </Popover> )} - </> + </div> ); };