front: fix waypoint menu not closing when clicking on manchette toolbar

Signed-off-by: SharglutDev <[email protected]>
OpenRailAssociation · Jan 6, 2025 · 1429110 · 1429110
1 parent c030eb0
commit 1429110
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/...s/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx b/...s/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
@@ -13,6 +13,7 @@ import {
 import type { Conflict } from '@osrd-project/ui-spacetimechart';
 import cx from 'classnames';
 import { compact } from 'lodash';
+import { createPortal } from 'react-dom';
 
 import type { OperationalPoint, TrainSpaceTimeData } from 'applications/operationalStudies/types';
 import upward from 'assets/pictures/workSchedules/ScheduledMaintenanceUp.svg';
@@ -204,6 +205,20 @@ const ManchetteWithSpaceTimeChartWrapper = ({
 
   return (
     <div ref={manchetteWithSpaceTimeCharWrappertRef} className="manchette-space-time-chart-wrapper">
+      {waypointMenuData.activeWaypointId &&
+        manchetteWithSpaceTimeCharWrappertRef.current &&
+        createPortal(
+          <div
+            style={{
+              width: '100%',
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              bottom: 0,
+            }}
+          />,
+          manchetteWithSpaceTimeCharWrappertRef.current
+        )}
       <div className="header">
         {waypointsPanelData && (
           <>

diff --git a/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx b/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx
@@ -18,7 +18,6 @@ const useWaypointMenu = (waypointsPanelData?: WaypointsPanelData) => {
   const timetableId = useSelector(getTimetableID);
 
   const [activeWaypointId, setActiveWaypointId] = useState<string>();
-  const [isClickOnWaypoint, setIsClickOnWaypoint] = useState(false);
 
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -30,10 +29,6 @@ const useWaypointMenu = (waypointsPanelData?: WaypointsPanelData) => {
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      // Avoid closing the menu when clicking on another waypoint
-      if (activeWaypointId && (event.target as HTMLElement).closest('.waypoint')) {
-        setIsClickOnWaypoint(true);
-      }
       // Close the menu if the user clicks outside of it
       if (!menuRef.current?.contains(event.target as Node)) {
         closeMenu();
@@ -82,11 +77,6 @@ const useWaypointMenu = (waypointsPanelData?: WaypointsPanelData) => {
   ];
 
   const handleWaypointClick = (id: string) => {
-    // Avoid reopening the menu when clicking on another waypoint or on the same one
-    if (isClickOnWaypoint) {
-      setIsClickOnWaypoint(false);
-      return;
-    }
     setActiveWaypointId(id);
   };