DND Kit doesnt work after collapsible/accordion open and close

[kasvith]

Problem:

• We need to organize some items using collapsible.
• Each collapsible need to be ordered(so we put them inside <SortableContext />)
• Items inside the collapsible(body) also has own <SortableContext /> to sort internal content. They also contain useDroppable, useDraggable hooks
• Items can be dragged to other collapsible items
• We have an outer DND Context which handles all events and arrange elements with appropriate approach
• We also have a DragOverlay which uses a portal

Everything works fine until we close a collapse. Then nothing works correctly (We are using antdesign, but i tried using headlessui also. Same result)

We arent using useSortable inside DragOverlay

What might be the issue?

<DndContext>
    // handle all events
    <SortableContext>
        // sort sections
        <Section>
            // we have useDroppable, useDraggable with two div elements.
            <div> // droppable
                <div> // draggable
                    <SortableContext>
                        <Collapse>
                            <Collapse.Header>
                                {{title}}
                            </Collapse.Header>
                            <Collapse.Body>
                                {{items}}
                            </Collapse.Body>
                        </Collapse>
                    </SortableContext>
                </div>
            </div>
        </Section>
        <Section></Section>
        <Section></Section>
    </SortableContext>

    <Portal>
        <DragOverlay></DragOverlay>
    </Portal>
</DndContext>

https://user-images.githubusercontent.com/13379595/211312743-83c8821b-51fe-45d3-9516-57214bcb905f.mp4

Reproducible: https://github.com/kasvith/dndkit-collapsible-reproduce Codesandbox: https://codesandbox.io/p/github/kasvith/dndkit-collapsible-reproduce

[vldnovikov]

@kasvith did you set the min-height for the last droppable? it looks like it has 0 height

[kasvith]

@vldnovikov no, droppable is even outside the collapse element. I checked the height is always there

[kasvith]

I updated example and provided a codesandbox

[pavogq]

@kasvith did you manage to find a fix for this? I'm having the same issue with headless ui and it's disclosure component.

[kasvith]

No luck

[Voxz-ai]

@kasvith did you happen to find a solution to this? i am running into the same issue.

[kasvith]

@Voxz-ai i changed the UX avoiding the collapsibles

[Voxz-ai]

For anyone else reading this, i was able to get it to work using MUI Accordion. If you are still working on it you should give that a try.

Cheers!