fix: update folder height when content changes dynamically

.changeset/plenty-spies-provide.md

@@ -0,0 +1,5 @@
+---
+"leva": patch
+---
+
+fix: update folder height when content changes dynamically

packages/leva/src/components/ValueInput/ValueInput.tsx

@@ -84,7 +84,12 @@ export function ValueInput({
         autoComplete="off"
         spellCheck="false"
         value={value}
-        onChange={update(onChange)}
+        onChange={update((value) => {
+          onChange(value)
+          // Only call onUpdate for non-number inputs; number inputs retain
+          // their original commit behavior (on blur/Enter via dragEnd)
+          if (type !== "number") onUpdate(value)
+        })}
         onFocus={() => emitOnEditStart()}
         onKeyPress={onKeyPress}
         onKeyDown={onKeyDown}

packages/leva/src/hooks/useToggle.ts

@@ -94,35 +94,55 @@ export function useToggle(toggled: boolean) {
   }, [])
 
   useEffect(() => {
-    // prevents first animation
+    const ref = wrapperRef.current!
+    const contentEl = contentRef.current!
+
+    const updateHeight = () => {
+      const { height } = contentEl.getBoundingClientRect()
+      if (ref.style.height !== `${height}px` && height > 0) {
+        ref.style.height = `${height}px`
+      }
+    }
+
+    if (!toggled) {
+      ref.style.height = '0px'
+      ref.style.overflow = 'hidden'
+      return
+    }
+
+    // prevents first animation on initial expand
     if (firstRender.current) {
       firstRender.current = false
+      updateHeight()
       return
     }
 
-    let timeout: number
-    const ref = wrapperRef.current!
-
     const fixHeight = () => {
-      if (toggled) {
-        ref.style.removeProperty('height')
-        ref.style.removeProperty('overflow')
-        contentRef.current!.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-      }
+      ref.style.removeProperty('height')
+      ref.style.removeProperty('overflow')
+      contentEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
     }
 
     ref.addEventListener('transitionend', fixHeight, { once: true })
 
-    const { height } = contentRef.current!.getBoundingClientRect()
-    ref.style.height = height + 'px'
-    if (!toggled) {
-      ref.style.overflow = 'hidden'
-      timeout = window.setTimeout(() => (ref.style.height = '0px'), 50)
+    const { height } = contentEl.getBoundingClientRect()
+    const currentHeight = ref.style.height
+    ref.style.height = `${height}px`
+
+    // If no transition will occur, call fixHeight directly
+    if (currentHeight === `${height}px`) {
+      ref.removeEventListener('transitionend', fixHeight)
+      fixHeight()
     }
 
+    const resizeObserver = new ResizeObserver(() => {
+      updateHeight()
+    })
+    resizeObserver.observe(contentEl)
+
     return () => {
       ref.removeEventListener('transitionend', fixHeight)
-      clearTimeout(timeout)
+      resizeObserver.disconnect()
     }
   }, [toggled])