From 25950c1f7b57921bba3ec643219283344d10d031 Mon Sep 17 00:00:00 2001
From: Nina Andersen <denektenina@gmail.com>
Date: Fri, 14 Oct 2022 11:04:59 +0200
Subject: [PATCH] :bug: Tooltip: fix arrow persistence (#2592)

* :bug: Tooltip: fix arrow persistence

* Updated snapshot
---
 .../src/components/Tooltip/Tooltip.tsx        | 65 ++++++++++---------
 .../__snapshots__/Tooltip.test.tsx.snap       |  1 +
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx b/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx
index fd3690f8da..d8eddca685 100644
--- 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
index fb090b5abf..60c9eb2848 100644
--- 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"