fix(tooltip): rendering in react v18

packages/charts/package.json

@@ -32,7 +32,7 @@
     "typecheck": "tsc -p ./tsconfig.src.json --noEmit && tsc -p ./tsconfig.nocomments.json --noEmit"
   },
   "dependencies": {
-    "@popperjs/core": "^2.4.0",
+    "@popperjs/core": "^2.11.8",
     "bezier-easing": "^2.1.0",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",

packages/charts/src/components/portal/tooltip_portal.tsx

@@ -93,18 +93,17 @@ const TooltipPortalComponent = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [(anchor as PortalAnchorRef)?.current ?? (anchor as PositionedPortalAnchorRef)?.appendRef?.current]);
 
+  const portalNode = useMemo(() => {
+    return getOrCreateNode(`echTooltipPortal${scope}__${chartId}`, 'echTooltipPortal__invisible', undefined, zIndex);
+  }, [chartId, scope, zIndex]);
+
   /**
    * This must not be removed from DOM throughout life of this component.
    * Otherwise the portal will loose reference to the correct node.
    */
-  const portalNodeElement = getOrCreateNode(
-    `echTooltipPortal${scope}__${chartId}`,
-    'echTooltipPortal__invisible',
-    undefined,
-    zIndex,
-  );
-
-  const portalNode = useRef(portalNodeElement);
+  useEffect(() => {
+    document.body.appendChild(portalNode);
+  });
 
   /**
    * Popper instance used to manage position of tooltip.
@@ -126,7 +125,7 @@ const TooltipPortalComponent = ({
     if (!visible) return;
 
     const { fallbackPlacements, placement, boundary, offset, boundaryPadding } = popperSettings;
-    popper.current = createPopper(anchorNode, portalNode.current, {
+    popper.current = createPopper(anchorNode, portalNode, {
       strategy: 'absolute',
       placement,
       modifiers: [
@@ -178,7 +177,7 @@ const TooltipPortalComponent = ({
 
   useEffect(() => {
     setPopper();
-    const nodeCopy = portalNode.current;
+    const nodeCopy = portalNode;
 
     return () => {
       if (nodeCopy.parentNode) {
@@ -223,20 +222,20 @@ const TooltipPortalComponent = ({
 
   useEffect(() => {
     if (!position && !skipPositioning) {
-      portalNode.current.classList.add('echTooltipPortal__invisible');
+      portalNode.classList.add('echTooltipPortal__invisible');
       return;
     }
-    portalNode.current.classList.remove('echTooltipPortal__invisible');
-  }, [position, skipPositioning]);
+    portalNode.classList.remove('echTooltipPortal__invisible');
+  }, [portalNode.classList, position, skipPositioning]);
 
   useEffect(() => {
     if (popper.current) {
       updateAnchorDimensions();
       void popper.current.update();
     }
-  }, [updateAnchorDimensions, popper]);
+  }, [updateAnchorDimensions]);
 
-  return createPortal(children, portalNode.current);
+  return createPortal(children, portalNode, 'ech-tooltip-portal');
 };
 
 TooltipPortalComponent.displayName = 'TooltipPortal';

yarn.lock

@@ -5312,10 +5312,10 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
-"@popperjs/core@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915"
-  integrity sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
 "@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0":
   version "2.9.2"
@@ -11713,7 +11713,8 @@ eslint-module-utils@^2.8.0:
     debug "^3.2.7"
 
 "eslint-plugin-elastic-charts@link:./packages/eslint-plugin-elastic-charts":
-  version "1.0.0"
+  version "0.0.0"
+  uid ""
 
 eslint-plugin-eslint-comments@^3.2.0:
   version "3.2.0"