fix(ui): properly animates height for dynamically rendered children

payloadcms · Dec 2, 2024 · 9d06a64 · 9d06a64
1 parent 71ba4a8
commit 9d06a64
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 36 deletions.
diff --git a/packages/ui/src/elements/AnimateHeight/index.tsx b/packages/ui/src/elements/AnimateHeight/index.tsx
@@ -12,6 +12,7 @@ export const AnimateHeight: React.FC<{
   id?: string
 }> = ({ id, children, className, duration = 300, height }) => {
   const [open, setOpen] = React.useState(() => Boolean(height))
+
   const prevIsOpen = useRef(open)
 
   const [childrenDisplay, setChildrenDisplay] = React.useState<CSSStyleDeclaration['display']>(
@@ -24,6 +25,9 @@ export const AnimateHeight: React.FC<{
 
   const [isAnimating, setIsAnimating] = React.useState(false)
 
+  const containerRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+
   useEffect(() => {
     let displayTimer: number
     let overflowTimer: number
@@ -65,10 +69,9 @@ export const AnimateHeight: React.FC<{
     }
   }, [height, duration])
 
-  const containerRef = useRef<HTMLDivElement>(null)
-
   usePatchAnimateHeight({
     containerRef,
+    contentRef,
     duration,
     open,
   })
@@ -92,7 +95,9 @@ export const AnimateHeight: React.FC<{
         transition: `height ${duration}ms ease`,
       }}
     >
-      <div {...(childrenDisplay ? { style: { display: childrenDisplay } } : {})}>{children}</div>
+      <div ref={contentRef} {...(childrenDisplay ? { style: { display: childrenDisplay } } : {})}>
+        {children}
+      </div>
     </div>
   )
 }
diff --git a/packages/ui/src/elements/AnimateHeight/usePatchAnimateHeight.ts b/packages/ui/src/elements/AnimateHeight/usePatchAnimateHeight.ts
@@ -1,12 +1,15 @@
 'use client'
-import { useEffect, useMemo, useRef } from 'react'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 export const usePatchAnimateHeight = ({
   containerRef,
+  contentRef,
   duration,
   open,
 }: {
   containerRef: React.RefObject<HTMLDivElement>
+  contentRef: React.RefObject<HTMLDivElement>
   duration: number
   open: boolean
 }): { browserSupportsKeywordAnimation: boolean } => {
@@ -19,52 +22,69 @@ export const usePatchAnimateHeight = ({
   )
 
   const previousOpenState = useRef(open)
+  const [isAnimating, setIsAnimating] = useState(false)
+  const resizeObserverRef = useRef<null | ResizeObserver>(null)
 
   useEffect(() => {
-    if (containerRef.current && !browserSupportsKeywordAnimation) {
-      const container = containerRef.current
-
-      const getTotalHeight = (el: HTMLDivElement) => {
-        const styles = window.getComputedStyle(el)
-        const marginTop = parseFloat(styles.marginTop)
-        const marginBottom = parseFloat(styles.marginBottom)
-        return el.scrollHeight + marginTop + marginBottom
-      }
+    const container = containerRef.current
+    const content = contentRef.current
 
-      const animate = () => {
-        const maxContentHeight = getTotalHeight(container)
-
-        // Set initial state
-        if (previousOpenState.current !== open) {
-          container.style.height = open ? '0px' : `${maxContentHeight}px`
-        }
+    if (!container || !content || browserSupportsKeywordAnimation) {
+      return
+    }
 
-        // Trigger reflow
-        container.offsetHeight // eslint-disable-line @typescript-eslint/no-unused-expressions
+    let animationFrameId: number
 
-        // Start animation
-        container.style.transition = `height ${duration}ms ease`
-        container.style.height = open ? `${maxContentHeight}px` : '0px'
+    const updateHeight = () => {
+      if (isAnimating && container && content) {
+        container.style.height = open ? `${content.scrollHeight}px` : '0px'
+      }
+    }
 
-        const transitionEndHandler = () => {
-          container.style.transition = ''
-          container.style.height = !open ? '0px' : 'auto'
-          container.removeEventListener('transitionend', transitionEndHandler)
-        }
+    const animate = () => {
+      setIsAnimating(true)
 
-        container.addEventListener('transitionend', transitionEndHandler)
+      // Set initial state
+      if (previousOpenState.current !== open) {
+        container.style.height = open ? '0px' : `${content.scrollHeight}px`
       }
 
-      animate()
+      // Trigger reflow
+      container.offsetHeight // eslint-disable-line @typescript-eslint/no-unused-expressions
 
-      previousOpenState.current = open
+      // Start animation
+      container.style.transition = `height ${duration}ms ease`
+      container.style.height = open ? `${content.scrollHeight}px` : '0px'
 
-      return () => {
+      const transitionEndHandler = () => {
         container.style.transition = ''
-        container.style.height = ''
+        container.style.height = open ? 'auto' : '0px'
+        container.removeEventListener('transitionend', transitionEndHandler)
+        setIsAnimating(false)
       }
+
+      container.addEventListener('transitionend', transitionEndHandler)
+    }
+
+    animate()
+    previousOpenState.current = open
+
+    // Setup ResizeObserver
+    resizeObserverRef.current = new ResizeObserver(() => {
+      if (isAnimating) {
+        animationFrameId = requestAnimationFrame(updateHeight)
+      }
+    })
+
+    resizeObserverRef.current.observe(content)
+
+    return () => {
+      container.style.transition = ''
+      container.style.height = ''
+      resizeObserverRef.current?.disconnect()
+      cancelAnimationFrame(animationFrameId)
     }
-  }, [open, duration, containerRef, browserSupportsKeywordAnimation])
+  }, [open, duration, containerRef, contentRef, browserSupportsKeywordAnimation, isAnimating])
 
   return { browserSupportsKeywordAnimation }
 }