Fails to expand vertically when Leva configuration is used

[benz2012]

Description

When the starting schema is an empty object (or a function that returns an empty object), and the Leva instance is set to neverHide, the controller fails to render any new paths until the collapse button is toggled. Presumably having nothing to do with the collapse button, but rather that some part of Leva is cached/memoized until receiving a state update from the collapse button.

Expected Behavior

The controller will immediately render any new paths added to the schema.

Steps to Reproduce

Can be seen in this simple CodeSandbox

Context (Environment)

I am building a graphics animation tool where nothing exists at the start, but I want the Controller Panel to be always open.

Hardware: MacBook Pro (13-inch, 2018, Four Thunderbolt 3 Ports) OS: macOS Monterey 12.6.5 Browser: Google Chrome Version 112.0.5615.137

[benz2012]

I under-diagnosed. It seems that using neverHide in any scenario prevents proper rendering. Example: https://codesandbox.io/s/crazy-wright-3u09pc?file=/src/App.js

[benz2012]

<Leva
  // ...
  // exclude the neverHide prop
  hidden={false}
/>

Is a workaround that almost works when you have at least 1 path in your initial schema. In both scenarios, however, the panel will fail to auto-grow on the height dimension, until you collapse and open it again.

[benz2012]

The plot thickens. It seems like the Controller fails to expand vertically so long as you have any instance of <Leva ... /> in your app. So, potentially the 0-paths issue is actually that it doesn't know how to expand vertically from 0-to-N, just like how I see the same behavior when starting with M-paths, and it fails to expand vertically from M-to-N

[benz2012]

I'm really struggling to find the source of the bug in the source code, but it seems very much related to toggling the "collapser". And so in this vein, the interim solution I found, was to start the controller as collapsed and use a 0ms timeout to un-collapse or open the panel. This then respects all the configuration supplied to Leva, and enables it to expand vertically when new schema paths are added.

// in component body
const [collapsed, setCollapsed] = useState(true)
  useEffect(() => {
    const timeoutId = setTimeout(() => { setCollapsed(false) }, 0)
    return () => clearTimeout(timeoutId)
  }, [])

// in render-return
<Leva
  neverHide
  collapsed={{
    collapsed,
    onChange: (value) => { setCollapsed(value) },
  }}
  // ... additional config here
/>