Merge pull request #32545 from overleaf/ii-tooltip-flickering

[web] Fix tooltip show and hide

GitOrigin-RevId: 3dfb7189adc5339b635696c9e84bf714a9a353dd

services/web/frontend/js/shared/components/tooltip.tsx

@@ -63,6 +63,12 @@ function Tooltip({
     [show, setShow]
   )
 
+  useEffect(() => {
+    if (hidden) {
+      setShow(false)
+    }
+  }, [hidden])
+
   useEffect(() => {
     document.addEventListener('keydown', handleKeyDown, true)
     return () => document.removeEventListener('keydown', handleKeyDown, true)
@@ -97,8 +103,8 @@ function Tooltip({
       {...overlayProps}
       delay={{ show: delayShow, hide: delayHide }}
       placement={overlayProps?.placement || 'top'}
-      show={show}
-      onToggle={setShow}
+      show={hidden ? false : show}
+      onToggle={hidden ? undefined : setShow}
     >
       {overlayProps?.trigger === 'click'
         ? children

services/web/test/frontend/components/shared/tooltip.spec.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
 describe('<OLTooltip />', function () {
@@ -61,4 +62,41 @@ describe('<OLTooltip />', function () {
     cy.get('body').type('{esc}')
     cy.findByText(description).should('not.exist')
   })
+
+  it('does not re-show the tooltip when the hidden prop transitions from true to false', function () {
+    const description = 'tooltip content'
+
+    function Wrapper() {
+      const [hidden, setHidden] = useState(false)
+      return (
+        <OLTooltip id="abc" description={description} hidden={hidden}>
+          <button onClick={() => setHidden(h => !h)}>button</button>
+        </OLTooltip>
+      )
+    }
+
+    cy.mount(
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+        }}
+      >
+        <Wrapper />
+      </div>
+    )
+
+    cy.findByRole('button', { name: 'button' }).as('tooltip-btn')
+    cy.get('@tooltip-btn').trigger('mouseover')
+    cy.findByText(description)
+    cy.get('@tooltip-btn').click()
+    cy.findByText(description).should('not.exist')
+    cy.get('@tooltip-btn').trigger('mouseout')
+    cy.get('@tooltip-btn').click()
+    cy.findByText(description).should('not.exist')
+    cy.get('@tooltip-btn').trigger('mouseover')
+    cy.findByText(description)
+  })
 })