perf: instead of transforming a virtual element, override bounding client rect instead

25b2286d · Dennis Collaris · 379e68fd · 25b2286d
Commit 25b2286d authored 9 months ago by Dennis Collaris
--- a/libs/shared/lib/components/tooltip/Tooltip.tsx
+++ b/libs/shared/lib/components/tooltip/Tooltip.tsx
@@ -133,7 +133,7 @@ export const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTML
  const context = useTooltipContext();
  const childrenRef = React.useMemo(() => {
    if (children == null) {
-      return React.createElement('div').ref;
+      return null;
    } else {
      return (children as any).ref;
    }
@@ -142,11 +142,22 @@ export const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTML
  const ref = useMergeRefs([context.data.refs.setReference, propRef, childrenRef]);

  React.useEffect(() => {
-    if (x == null) return;
    if (x && y && context.data.refs.reference.current != null) {
      const element = context.data.refs.reference.current as HTMLElement;
      element.style.position = 'absolute';
-      element.style.transform = `translate(${x}px, ${y}px)`;
+      const {x: offsetX, y: offsetY} = element.getBoundingClientRect();
+      element.getBoundingClientRect = () => {
+        return {
+          width: 0,
+          height: 0,
+          x: offsetX,
+          y: offsetY,
+          top: y + offsetY,
+          left: x + offsetX,
+          right: x + offsetX,
+          bottom: y + offsetY,
+        } as DOMRect
+      }
      context.data.update();
    }
  }, [x, y]);