nathancahill / split

Unopinionated utilities for resizeable split views
https://split.js.org/
MIT License
6.11k stars 449 forks source link

react-split: Children added after first render have no gutter #745

Open adam-binks opened 2 years ago

adam-binks commented 2 years ago

Here's a code sandbox reproducing the bug.

Notice that when you click "add pane", there is no gutter separating the newly added pane from the other children.

Do you know what causes this issue, and is there a temporary workaround?

Thanks for the awesome library!

matt-winfield commented 2 years ago

As a temporary workaround, I found that adding the key prop to the Split component and setting it to the length of the children forces it to re-render when you add/remove elements. (You could use basically any other prop, key just seems most suitable for me)

So the code sandbox example you linked can be fixed by adding:

<Split className="split" direction="horizontal" key={panes.length}>
    {panes.map((pane) => (
    ....
</Split>

A bit hacky, but it does the job until this gets fixed in the library properly.