Livewire components inside the sortable list

[kurucu]

I have a nested sortable list of items (straight foreach inside a single Livewire component). Each item has some actions, like edit and delete. these create popups and are driven by embedded components.

These played havoc with the sortable library, even with keys. I think the mirror created when dragging causes some artefacts, I'm not really sure. Hiding doesn't help (because the nodes still exist).

So my solution for anyone suffering the same problems: move a component outside of the sortable area. Have it receive Livewire events to load and do things with the item, and then when finished fire a "refresh-items" event, so that the sortable list component can update titles/removed items etc.

[opensourcecnc]

I think this is a livewire issue (actually not an issue at all). I stumbled upon this when deleting items from the list too, without sortable. Adding a key to each element solved the issue for me. Now, the actions inside the list (edit and delete) work as they should when sorting, too.

        @foreach ($menus as $item)
            @php
                $randomKey = time().$item->id;
            @endphp
            <livewire:admin.one-menu-item :item="$item" :key="$randomKey"/>
        @endforeach