fix(fuselage, fuselage-hooks): Position (#1045)

Co-authored-by: Douglas Fabris <devfabris@gmail.com>
RocketChat · May 9, 2023 · 9ba3fac · 9ba3fac
1 parent 279bc86
commit 9ba3fac
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/packages/fuselage-hooks/src/usePosition/index.ts b/packages/fuselage-hooks/src/usePosition/index.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { RefObject, CSSProperties } from 'react';
 
 import { useDebouncedCallback } from '../useDebouncedCallback';
@@ -171,7 +171,7 @@ export function getPositionStyle({
   } as UsePositionResult;
 }
 
-const UPDATE_DEBOUNCE_DELAY = 10;
+const UPDATE_DEBOUNCE_DELAY = 30;
 
 /**
  * Hook to deal and position an element using an anchor
@@ -192,6 +192,12 @@ export function usePosition<TTarget extends Element, TAnchor extends Element>(
 ): UsePositionResult {
   const [style, setStyle] = useSafely(useState<UsePositionResult>(emptyStyle));
 
+  const containerRef = useRef(container);
+
+  useEffect(() => {
+    containerRef.current = container;
+  }, [container]);
+
   const handleBoundingClientRectChange = useDebouncedCallback(
     useMutableCallback(() => {
       const target = targetRef.current;
@@ -238,9 +244,6 @@ export function usePosition<TTarget extends Element, TAnchor extends Element>(
 
   useBoundingClientRectChanges(targetRef, handleBoundingClientRectChange);
   useBoundingClientRectChanges(anchorRef, handleBoundingClientRectChange);
-  useBoundingClientRectChanges(
-    { current: container },
-    handleBoundingClientRectChange
-  );
+  useBoundingClientRectChanges(containerRef, handleBoundingClientRectChange);
   return style;
 }
diff --git a/packages/fuselage/src/components/Position/Position.tsx b/packages/fuselage/src/components/Position/Position.tsx
@@ -6,7 +6,7 @@ import type {
   ReactPortal,
   ReactElement,
 } from 'react';
-import { useRef, useMemo, cloneElement, useState } from 'react';
+import { useRef, useMemo, cloneElement, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 import type Box from '../Box';
@@ -51,6 +51,15 @@ const Position = ({
     return element;
   });
 
+  useEffect(
+    () => () => {
+      if (portalContainer.childNodes.length === 0) {
+        document.body.removeChild(portalContainer);
+      }
+    },
+    [portalContainer]
+  );
+
   return createPortal(
     cloneElement(children, {
       ref: target,