-
Notifications
You must be signed in to change notification settings - Fork 224
Description
Hello. I have issues with the height not being recalculated when dynamically adding folders. Copilot helped me to create this bug-report. I do hope this is ok and is of any help :)
Best Benny
Description
When using folders in Leva, if content is added dynamically after the folder has been expanded (e.g., new controls or nested folders), the folder's height does not recalculate to fit the new content. This results in hidden content and clipped UI, requiring the user to manually toggle the folder closed and open for the height to adjust.
Reproduction
- Create a folder with some controls, open it.
- Dynamically add more controls to the folder while it's open (e.g., as a result of a state change or API call).
- Observe that the folder's height remains at the previous value and does not grow to reveal the new content.
Expected behavior
The folder should automatically resize its height to fit dynamically added content, without needing to toggle collapse/expand.
Proposed solution
Enhance the useToggle hook that manages folder height and expand/collapse animation, by adding a ResizeObserver to watch the folder's content node. When content size changes, the folder wrapper's height should be recalculated accordingly. This will allow dynamic content to always be visible without extra user action.
Pseudocode for solution (by AI)
// Inside useToggle hook:
useEffect(() => {
if (!toggled) return
const observer = new ResizeObserver(() => {
if (wrapperRef.current && contentRef.current) {
const { height } = contentRef.current.getBoundingClientRect()
wrapperRef.current.style.height = height + 'px'
}
})
if (contentRef.current) observer.observe(contentRef.current)
return () => observer.disconnect()
}, [toggled])Additional context
- This limitation affects use cases where folder content is assembled asynchronously or dynamically.
- Workarounds exist (e.g., manually toggling), but are not ideal UX.
- If this change is accepted, it would be backwards compatible, as it only improves the expand/collapse logic for dynamic content scenarios.