Skip to content

Folder content height does not update after adding dynamic content #601

@benny-livemap

Description

@benny-livemap

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

  1. Create a folder with some controls, open it.
  2. Dynamically add more controls to the folder while it's open (e.g., as a result of a state change or API call).
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions