Просмотр исходного кода

Merge pull request #20007 from overleaf/ae-review-panel-container-ref

Fix event listener attachment to review panel container

GitOrigin-RevId: ceb1023d7be48d9b88e725963124cd04e98127bd
Alf Eaton 2 лет назад
Родитель
Сommit
ee8b8d0692

+ 21 - 9
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"