🐛 Tooltip: fix arrow persistence (#2592)

* 🐛 Tooltip: fix arrow persistence * Updated snapshot
equinor · Oct 14, 2022 · 25950c1 · 25950c1
1 parent cc44939
commit 25950c1
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 31 deletions.
diff --git a/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx b/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx
@@ -6,6 +6,7 @@ import {
   SVGProps,
   cloneElement,
   useMemo,
+  useEffect,
 } from 'react'
 import styled from 'styled-components'
 import {
@@ -116,39 +117,41 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       useDismiss(context),
     ])
 
-    const staticSide = {
-      top: 'bottom',
-      right: 'left',
-      bottom: 'top',
-      left: 'right',
-    }[finalPlacement.split('-')[0]]
+    useEffect(() => {
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[finalPlacement.split('-')[0]]
 
-    let arrowTransform = 'none'
-    switch (staticSide) {
-      case 'right':
-        arrowTransform = 'rotateY(180deg)'
-        break
-      case 'left':
-        arrowTransform = 'none'
-        break
-      case 'top':
-        arrowTransform = 'rotate(90deg)'
-        break
-      case 'bottom':
-        arrowTransform = 'rotate(-90deg)'
-        break
-    }
+      let arrowTransform = 'none'
+      switch (staticSide) {
+        case 'right':
+          arrowTransform = 'rotateY(180deg)'
+          break
+        case 'left':
+          arrowTransform = 'none'
+          break
+        case 'top':
+          arrowTransform = 'rotate(90deg)'
+          break
+        case 'bottom':
+          arrowTransform = 'rotate(-90deg)'
+          break
+      }
 
-    if (arrowRef.current) {
-      Object.assign(arrowRef.current.style, {
-        left: arrowX != null ? `${arrowX}px` : '',
-        top: arrowY != null ? `${arrowY}px` : '',
-        right: '',
-        bottom: '',
-        [staticSide]: '-6px',
-        transform: arrowTransform,
-      })
-    }
+      if (arrowRef.current) {
+        Object.assign(arrowRef.current.style, {
+          left: arrowX != null ? `${arrowX}px` : '',
+          top: arrowY != null ? `${arrowY}px` : '',
+          right: '',
+          bottom: '',
+          [staticSide]: '-6px',
+          transform: arrowTransform,
+        })
+      }
+    })
 
     const updatedChildren = cloneElement(children, {
       ...getReferenceProps({

diff --git a/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`Tooltip Matches snapshot 1`] = `
   Tooltip
   <div
     class="c1"
+    style="top: -6px; transform: rotate(90deg);"
   >
     <svg
       class="c2 arrowSvg"