front: prevent popover from following the viewport

In OSRD, we use fields inside of wrappers that scrolls themselves. Using popovers, we punch these divs through all those wrappers into the top-layer; this prevents the computation from actually positionning the div at the right place.

This should be reverted/removed altogether with this hook as soon as we have CSS native anchoring, as it won't have this kind of problems at all.

Signed-off-by: Stanislas Signoud (Signez) <signez@stanisoft.net>

Author: Signez

front/ui/ui-core/src/hooks/usePopoverPosition.tsx

@@ -32,9 +32,14 @@ export const usePopoverPosition = (
   }, [inputRef, popoverRef, verticalOffset]);
 
   useEffect(() => {
-    const handleResize = () => calculatePosition();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    const handleResizeScroll = () => calculatePosition();
+    window.addEventListener('resize', handleResizeScroll);
+    // TODO: Get rid of this as soon as we can, using CSS native anchoring
+    window.addEventListener('scroll', handleResizeScroll, true);
+    return () => {
+      window.removeEventListener('resize', handleResizeScroll);
+      window.removeEventListener('scroll', handleResizeScroll, true);
+    };
   }, [calculatePosition]);
 
   return { popoverPosition, calculatePosition };