Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
adam-binks opened this issue May 30, 2022 · 1 comment · May be fixed by #746
Open

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

adam-binks opened this issue May 30, 2022 · 1 comment · May be fixed by #746

Comments

@adam-binks
Copy link

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants