From 25b2286dff80ab29d28b326cb63931dc7c16e8bf Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.collaris@me.com>
Date: Mon, 1 Jul 2024 14:48:06 +0200
Subject: [PATCH] perf: instead of transforming a virtual element, override
bounding client rect instead
---
libs/shared/lib/components/tooltip/Tooltip.tsx | 17 ++++++++++++++---
1 file changed, 14 insertions(+), 3 deletions(-)
diff --git a/libs/shared/lib/components/tooltip/Tooltip.tsx b/libs/shared/lib/components/tooltip/Tooltip.tsx
index bd5917988..3541d2516 100644
--- 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]);
--
GitLab