fix: issues with ResizeObserver

Author: tannerlinsley

examples/simple/package.json

@@ -1,8 +1,8 @@
 {
   "private": true,
   "scripts": {
-    "start": "rescripts start",
-    "build": "rescripts build",
+    "start": "SKIP_PREFLIGHT_CHECK=true rescripts start",
+    "build": "SKIP_PREFLIGHT_CHECK=true rescripts build",
     "test": "rescripts test",
     "eject": "rescripts eject",
     "serve": "serve build -s -p 3001"

src/components/Cursors.tsx

@@ -69,8 +69,12 @@ export default function Cursors<TDatum>() {
 
   return (
     <>
-     {resolvedPrimaryOptions.show &&  <Cursor primary options={resolvedPrimaryOptions} />}
-     {resolvedSecondaryOptions.show &&  <Cursor options={resolvedSecondaryOptions} />}
+      {resolvedPrimaryOptions.show && (
+        <Cursor primary options={resolvedPrimaryOptions} />
+      )}
+      {resolvedSecondaryOptions.show && (
+        <Cursor options={resolvedSecondaryOptions} />
+      )}
     </>
   )
 }

src/components/Tooltip.tsx

@@ -82,25 +82,21 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
     const width = anchorRect.width ?? 0
     const height = anchorRect.height ?? 0
 
-    const box = {
-      x: translateY,
-      y: translateX,
-      top: translateY,
-      left: translateX,
-      bottom: translateY + width,
-      right: translateX + height,
-      width: width,
-      height: height,
-      toJSON: () => ({} as DOMRect),
-    }
-
-    box.toJSON = () => box
-
-    return {
-      getBoundingClientRect: () => {
-        return box
-      },
-    }
+    const el = document.createElement('div')
+
+    el.getBoundingClientRect = () =>
+      ({
+        x: translateX,
+        y: translateY,
+        width: width,
+        height: height,
+        top: translateY,
+        left: translateX,
+        bottom: translateY + width,
+        right: translateX + height,
+      } as any)
+
+    return el
   }, [latestFocusedDatum?.element, svgRect])
 
   const anchor = useAnchor({

src/hooks/useAnchor.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import useRect, { HasBoundingClientRect } from './useRect'
+import useRect from './useRect'
 
 //
 
@@ -76,9 +76,9 @@ export function useAnchor(options: {
   show: boolean
   useLargest?: boolean
   side: SideOption | SideOption[]
-  portalEl: HasBoundingClientRect | null | undefined
-  anchorEl: HasBoundingClientRect | null | undefined
-  tooltipEl: HasBoundingClientRect | null | undefined
+  portalEl: Element | null | undefined
+  anchorEl: Element | null | undefined
+  tooltipEl: Element | null | undefined
 }) {
   const portalDims = useRect(options.portalEl, options.show)
   const anchorDims = useRect(options.anchorEl, options.show)

src/hooks/useRect.ts

@@ -1,53 +1,59 @@
 import React from 'react'
 
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
-
-export type HasBoundingClientRect = {
-  getBoundingClientRect: () => DOMRect
-}
-
 export default function useRect(
-  node: HasBoundingClientRect | null | undefined,
+  element: Element | null | undefined,
   enabled: boolean
 ) {
-  const [element, setElement] = React.useState(node)
+  const rerender = React.useReducer(() => ({}), [])[1]
 
-  let [rect, setRect] = React.useState<DOMRect>({
-    width: 0,
-    height: 0,
-  } as DOMRect)
+  const rectRef = React.useRef<DOMRect>()
 
-  const rectRef = React.useRef(rect)
+  const measure = React.useCallback(() => {
+    if (element) {
+      rectRef.current = element.getBoundingClientRect()
+    }
+  }, [element])
+
+  if (!rectRef.current) {
+    measure()
+  }
 
-  rectRef.current = rect
+  React.useEffect(() => {
+    if (!element || !enabled) {
+      return
+    }
 
-  useIsomorphicLayoutEffect(() => {
-    if (node !== element) {
-      setElement(node)
+    const cb = () => {
+      measure()
+      rerender()
     }
-  })
 
-  useIsomorphicLayoutEffect(() => {
-    if (enabled && element) {
-      setRect(element.getBoundingClientRect())
+    document.addEventListener('scroll', cb)
+
+    return () => {
+      document.removeEventListener('scroll', cb)
     }
-  }, [element, enabled])
+  }, [element, enabled, measure, rerender])
 
   React.useEffect(() => {
     if (!element || !enabled) {
       return
     }
 
-    const observer = new ResizeObserver((entries) => {
-      setRect(entries[0]?.contentRect)
+    measure()
+    rerender()
+
+    const observer = new ResizeObserver(entries => {
+      measure()
+      rerender()
     })
 
     observer.observe(element as Element)
 
     return () => {
       observer.unobserve(element as Element)
     }
-  }, [element, enabled])
+  }, [element, enabled, measure, rerender])
 
   // const resolvedRect = React.useMemo(() => {
   //   if (!element || !(element as Element).tagName) {
@@ -74,5 +80,5 @@ export default function useRect(
   //   }
   // }, [element, rect])
 
-  return rect
+  return rectRef.current
 }