simpler solution for highlights following you around

nlxai · Jul 17, 2024 · d2a716f · d2a716f
1 parent 9f9fb5b
commit d2a716f
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 21 deletions.
diff --git a/packages/journey-manager/src/index.ts b/packages/journey-manager/src/index.ts
@@ -508,7 +508,6 @@ export const run = async (props: RunProps): Promise<RunOutput> => {
   if (props.ui != null) {
     uiElement = document.createElement("journey-manager");
     uiElement.style.zIndex = 1000;
-    uiElement.style.position = "absolute";
     uiElement.config = props.ui;
     uiElement.client = client;
     const handleAction = (ev: any): void => {

diff --git a/packages/journey-manager/src/ui.tsx b/packages/journey-manager/src/ui.tsx
@@ -395,15 +395,6 @@ const Highlight: FunctionComponent<{ element: HTMLElement }> = ({
   const ref = useRef<HTMLDivElement | null>(null);
   const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
 
-  const ancestors: Element[] = ((element: HTMLElement) => {
-    const ancestors: Element[] = [];
-    while (element.parentNode instanceof HTMLElement) {
-      ancestors.push(element.parentNode);
-      element = element.parentNode;
-    }
-    return ancestors;
-  })(element);
-
   useEffect(() => {
     if (ref.current != null) {
       const highlight = ref.current;
@@ -420,17 +411,7 @@ const Highlight: FunctionComponent<{ element: HTMLElement }> = ({
           });
       };
 
-      const cleanupAutoUpdate = autoUpdate(element, highlight, moveHighlight);
-      const resizeObserver = new ResizeObserver(moveHighlight);
-
-      ancestors.forEach((ancestor) => {
-        resizeObserver.observe(ancestor);
-      });
-
-      return () => {
-        resizeObserver.disconnect();
-        cleanupAutoUpdate();
-      };
+      return autoUpdate(element, highlight, moveHighlight);
     }
   }, [element]);
   return (