Merge pull request #32641 from overleaf/ab-hide-add-comment-tooltip-on-blur

[web] Hide add comment tooltip when clicking outside the editor

GitOrigin-RevId: beff4c2e54fd28e47028f2bbc586f26fe6d3cc1d

services/web/frontend/js/features/review-panel/components/review-tooltip-menu.tsx

@@ -60,6 +60,27 @@ const ReviewTooltipMenu: FC = () => {
     }
   }, [tooltipState, previousTooltipState])
 
+  useEffect(() => {
+    if (!show || !tooltipState || !permissions.comment) {
+      return
+    }
+    const handleMouseDown = (event: MouseEvent) => {
+      const target = event.target as Element | null
+      if (
+        !view.contentDOM.contains(target) &&
+        !target?.closest?.('.review-tooltip-menu-container') &&
+        !target?.closest?.('.modal') &&
+        !target?.closest?.('.modal-backdrop')
+      ) {
+        setShow(false)
+      }
+    }
+    document.addEventListener('mousedown', handleMouseDown)
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown)
+    }
+  }, [show, tooltipState, permissions.comment, view])
+
   const addComment = useCallback(() => {
     if (!permissions.comment) {
       return

services/web/test/frontend/features/review-panel/review-panel.spec.tsx

@@ -538,6 +538,35 @@ describe('<ReviewPanel />', function () {
     })
   })
 
+  describe('add comment tooltip visibility', function () {
+    beforeEach(function () {
+      cy.findByText('contentLine 12').type(
+        '{home}{shift}' + '{rightArrow}'.repeat(6),
+        { scrollBehavior: false }
+      )
+      cy.get('.review-tooltip-menu').should('exist')
+    })
+
+    it('hides the tooltip when clicking a toolbar button', function () {
+      cy.findByRole('button', { name: 'Undo' }).click({ scrollBehavior: false })
+      cy.get('.review-tooltip-menu').should('not.exist')
+    })
+
+    it('hides the tooltip when clicking outside the editor', function () {
+      cy.get('@review-panel').click({ scrollBehavior: false })
+      cy.get('.review-tooltip-menu').should('not.exist')
+    })
+
+    it('keeps the add comment button functional when clicked', function () {
+      cy.get('.review-tooltip-add-comment-button').click({
+        scrollBehavior: false,
+      })
+      cy.get('@review-panel').within(() => {
+        cy.get('.review-panel-add-comment-textarea').should('exist')
+      })
+    })
+  })
+
   describe('bulk actions entry', function () {
     beforeEach(function () {
       // Select a deletion and an insertion
@@ -590,6 +619,26 @@ describe('<ReviewPanel />', function () {
         ])
       })
     })
+
+    it('keeps the tooltip visible when cancelling the accept confirmation modal', function () {
+      cy.get('@accept-selected-changes').click({ scrollBehavior: false })
+      cy.findByRole('dialog').within(() => {
+        cy.findByRole('button', { name: 'Cancel' }).click({
+          scrollBehavior: false,
+        })
+      })
+      cy.get('.review-tooltip-menu').should('exist')
+    })
+
+    it('keeps the tooltip visible when cancelling the reject confirmation modal', function () {
+      cy.get('@reject-selected-changes').click({ scrollBehavior: false })
+      cy.findByRole('dialog').within(() => {
+        cy.findByRole('button', { name: 'Cancel' }).click({
+          scrollBehavior: false,
+        })
+      })
+      cy.get('.review-tooltip-menu').should('exist')
+    })
   })
 
   describe('overview mode', function () {