diff --git a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx index 20c7fd78e8c..46ea0209a27 100644 --- a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx +++ b/front/src/modules/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 (
+ {waypointMenuData.activeWaypointId && + manchetteWithSpaceTimeCharWrappertRef.current && + createPortal( +
, + manchetteWithSpaceTimeCharWrappertRef.current + )}
{waypointsPanelData && ( <> diff --git a/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx b/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx index 7ec188e7b65..728ca202b6f 100644 --- 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(); - const [isClickOnWaypoint, setIsClickOnWaypoint] = useState(false); const menuRef = useRef(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); };