TooltipV2: Set the tooltip position when the popover open not when th…

…e toggle event is triggered (#4327)

* do not set position if it was set before

* console

* only position set on tooltip show

* remove event listener with the same func signature

* just test

* calculate anchor position after popover-open class is added

* clean up

* comment tidy up

* fix tests

* changeset

* move setting popover auto back in the render

* update snapshots

.changeset/beige-meals-doubt.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Tooltip v2: Set the tooltip position when popover-open attribute is added to the tooltip element not the toggle event is triggered

packages/react/src/TooltipV2/Tooltip.tsx

@@ -23,6 +23,7 @@ const StyledTooltip = styled.span`
   /* Overriding the default popover styles */
   display: none;
   &[popover] {
+    position: absolute;
     padding: 0.5em 0.75em;
     width: max-content;
     margin: auto;
@@ -196,7 +197,22 @@ export const Tooltip = React.forwardRef(
 
     const openTooltip = () => {
       if (tooltipElRef.current && triggerRef.current && !tooltipElRef.current.matches(':popover-open')) {
-        tooltipElRef.current.showPopover()
+        const tooltip = tooltipElRef.current
+        const trigger = triggerRef.current
+        tooltip.showPopover()
+        /*
+         * TOOLTIP POSITIONING
+         */
+        const settings = {
+          side: directionToPosition[direction].side,
+          align: directionToPosition[direction].align,
+        }
+        const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)
+        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after
+        const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string]
+        setCalculatedDirection(calculatedDirection)
+        tooltip.style.top = `${top}px`
+        tooltip.style.left = `${left}px`
       }
     }
     const closeTooltip = () => {
@@ -239,32 +255,8 @@ export const Tooltip = React.forwardRef(
         }
       }
 
-      /*
-       * TOOLTIP POSITIONING
-       */
       const tooltip = tooltipElRef.current
-      const trigger = triggerRef.current
       tooltip.setAttribute('popover', 'auto')
-      const settings = {
-        side: directionToPosition[direction].side,
-        align: directionToPosition[direction].align,
-      }
-
-      const positionSet = () => {
-        const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)
-
-        tooltip.style.top = `${top}px`
-        tooltip.style.left = `${left}px`
-        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after
-        const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string]
-        setCalculatedDirection(calculatedDirection)
-      }
-
-      tooltip.addEventListener('toggle', positionSet)
-
-      return () => {
-        tooltip.removeEventListener('toggle', positionSet)
-      }
     }, [tooltipElRef, triggerRef, direction, type])
 
     return (

packages/react/src/__tests__/ActionMenu.test.tsx

@@ -1,4 +1,4 @@
-import {render as HTMLRender, waitFor} from '@testing-library/react'
+import {render as HTMLRender, waitFor, act} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {axe} from 'jest-axe'
 import React from 'react'
@@ -360,7 +360,10 @@ describe('ActionMenu', () => {
       ),
     )
     const button = component.getByRole('button')
-    button.focus()
+    act(() => {
+      button.focus()
+    })
+
     expect(component.getByRole('tooltip')).toBeInTheDocument()
   })
 

packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -1926,6 +1926,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c5[popover] {
+  position: absolute;
   padding: 0.5em 0.75em;
   width: -webkit-max-content;
   width: -moz-max-content;
@@ -2920,6 +2921,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c6[popover] {
+  position: absolute;
   padding: 0.5em 0.75em;
   width: -webkit-max-content;
   width: -moz-max-content;