From ee8b8d06926869200be47fafce835dbefc96e631 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 20 Aug 2024 08:36:18 +0100
Subject: [PATCH] Merge pull request #20007 from
 overleaf/ae-review-panel-container-ref

Fix event listener attachment to review panel container

GitOrigin-RevId: ceb1023d7be48d9b88e725963124cd04e98127bd
---
 .../components/review-panel-current-file.tsx  | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
index 405d832cb3..ae2fa7fba4 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
@@ -100,17 +100,29 @@ const ReviewPanelCurrentFile: FC = () => {
     }
   }, [state, updatePositions])
 
+  const handleContainer = useCallback(
+    (element: HTMLDivElement | null) => {
+      containerRef.current = element
+      if (containerRef.current) {
+        containerRef.current.addEventListener(
+          'review-panel:position',
+          updatePositions
+        )
+      }
+    },
+    [updatePositions]
+  )
+
   useEffect(() => {
-    const element = containerRef.current
-    if (element) {
-      element.addEventListener('review-panel:position', updatePositions)
-      // view.scrollDOM.addEventListener('scroll', positionListener)
-      return () => {
-        element.removeEventListener('review-panel:position', updatePositions)
-        // view.scrollDOM.removeEventListener('scroll', positionListener)
+    return () => {
+      if (containerRef.current) {
+        containerRef.current.removeEventListener(
+          'review-panel:position',
+          updatePositions
+        )
       }
     }
-  }, [view, updatePositions])
+  }, [updatePositions])
 
   const buildEntries = useCallback(() => {
     if (ranges) {
@@ -194,7 +206,7 @@ const ReviewPanelCurrentFile: FC = () => {
     rangesWithPositions.comments.length === 0
 
   return (
-    <div ref={containerRef}>
+    <div ref={handleContainer}>
       {selectionCoords && (
         <div
           className="review-panel-entry"