From ebab25058a53dbf7620075bee2a6226e6e04858e Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Fri, 21 Feb 2025 12:45:08 +0100
Subject: [PATCH] Allow selecting comment text without changing scroll position
 (#23628)

* Allow selecting comment text without changing scroll position

* cursor:default on review content

* check text selection on mouseup

* update comment

GitOrigin-RevId: f867613f5b4d08c3b960abfa061b14b404f411a8
---
 .../components/review-panel-entry.tsx         | 22 +++++++++++++++++--
 .../pages/editor/review-panel-new.scss        |  1 +
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx
index 744be1e659..2f6c69c67e 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx
@@ -51,12 +51,13 @@ export const ReviewPanelEntry: FC<{
   const { setReviewPanelOpen, reviewPanelOpen } = useLayoutContext()
   const highlighted = isSelectionWithinOp(op, state.selection.main)
   const entryRef = useRef<HTMLDivElement>(null)
+  const mousePressedRef = useRef(false)
 
   const openReviewPanel = useCallback(() => {
     setReviewPanelOpen(true)
   }, [setReviewPanelOpen])
 
-  const focusHandler = useCallback(
+  const selectEntry = useCallback(
     event => {
       setFocused(true)
 
@@ -77,11 +78,17 @@ export const ReviewPanelEntry: FC<{
           (entryRef.current?.offsetHeight || 0)
 
         if (entryBottom > OFFSET_FOR_ENTRIES_ABOVE) {
+          // if the entry textarea is visible, no need to select the entry
+          // so that it doesn't scroll out of view as user types
           setTextareaFocused(true)
           return
         }
       }
 
+      if (mousePressedRef.current) {
+        return
+      }
+
       setSelected(true)
 
       if (!selectLineOnFocus) {
@@ -131,8 +138,19 @@ export const ReviewPanelEntry: FC<{
   return (
     <div
       ref={entryRef}
-      onFocus={focusHandler}
+      onMouseDown={() => {
+        mousePressedRef.current = true
+      }}
+      onMouseUp={event => {
+        mousePressedRef.current = false
+        const isTextSelected = Boolean(window.getSelection()?.toString())
+        if (!isTextSelected && !selected) {
+          selectEntry(event)
+        }
+      }}
+      onFocus={selectEntry}
       onBlur={() => {
+        mousePressedRef.current = false
         setSelected(false)
         setFocused(false)
         setTextareaFocused(false)
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
index 2691cf4587..895098af2d 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
@@ -383,6 +383,7 @@
   .review-panel-expandable-content {
     display: inline;
     padding-right: var(--spacing-02);
+    cursor: default;
   }
 
   .review-panel-expandable-inline {