[bug] Flickering when non-nested elements are moved to a dynamically shown drop zone

[dertuxmalwieder]

I have an interesting problem (using latest Chrome-based Edge and Sortable 1.15.1):

I need a sortable list with dynamic drop zones, because I want to be able to either move an element before/after another element or create a new subitem. Overall, it works quite nicely:

However, the "it works pretty nice" part ends as soon as the list contains multiple non-nested elements. It looks like Sortable gets confused when calculating the offset:

msedge_ASur0JoE7h.mp4

In order to make bug hunting easier, here are just the relevant parts:

• Sortable configuration:

  {
    group: "nested",
    animation: 0,
    forceFallback: true,
    fallbackOnBody: true,
    revertOnSpill: true,
    filter: ".filtered",
    handle: ".my-handle",
    onMove(evt, _originalEvent) {
        $(".drop-container").addClass("d-none");
        let menuItem = $(evt.related).closest('.menuItem');
        if (menuItem.length > 0) {
            menuItem.find('.drop-container:first').removeClass("d-none");
        }
    },
  }

• List HTML (using Bootstrap 5.3):

  <ul id="menuItems" class="ps-0">
    <li class="menuItem content p-2 pt-1 pb-1">
        <div class="container-fluid drop-container m-0 p-0 pt-2 d-none">
            <div class="row">
                <div class="col">
                    <div class="alert alert-primary m-0 container-move">
                        <!-- drag zone for moving to the top -->
                        Verschieben
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="menuItem content p-2 pt-1 pb-1 hasChildren">
        <i class="fa-solid fa-grip-dots-vertical my-handle"></i>
        <i class="fa-solid fa-pen-to-square ms-4 btnEditMenuItem"></i>
        <i class="fa-solid fa-trash ms-4 btnDeleteMenuItem"></i>
        <span class="ps-3 displayText">Home</span>
        <div class="container-fluid drop-container m-0 p-0 pt-2 d-none">
            <div class="row">
                <div class="col-3">
                    <div class="alert alert-primary m-0 container-move">
                        Verschieben
                    </div>
                </div>
                <div class="col-3">
                    <div class="alert alert-primary m-0 container-newlist">
                        Neuer Unterpunkt
                    </div>
                </div>
            </div>
        </div>
        <ul class="mt-2">
            <li class="menuItem content p-2 pt-1 pb-1">
                <i class="fa-solid fa-grip-dots-vertical my-handle"></i>
                <i class="fa-solid fa-pen-to-square ms-4 btnEditMenuItem"></i>
                <i class="fa-solid fa-trash ms-4 btnDeleteMenuItem"></i>
                <span class="ps-3 displayText">Some sub menu item</span>
                <div class="container-fluid drop-container m-0 p-0 pt-2 d-none">
                    <div class="row">
                        <div class="col-3">
                            <div class="alert alert-primary m-0 container-move">
                                Verschieben
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="alert alert-primary m-0 container-newlist">
                                Neuer Unterpunkt
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </li>
    <li class="menuItem content p-2 pt-1 pb-1">
        <i class="fa-solid fa-grip-dots-vertical my-handle"></i>
        <i class="fa-solid fa-pen-to-square ms-4 btnEditMenuItem"></i>
        <i class="fa-solid fa-trash ms-4 btnDeleteMenuItem"></i>
        <span class="ps-3 displayText">Test entry</span>
        <div class="container-fluid drop-container m-0 p-0 pt-2 d-none">
            <div class="row">
                <div class="col-3">
                    <div class="alert alert-primary m-0 container-move">
                        Verschieben
                    </div>
                </div>
                <div class="col-3">
                    <div class="alert alert-primary m-0 container-newlist">
                        Neuer Unterpunkt
                    </div>
                </div>
            </div>
        </div>
    </li>
    <!-- ... snip ... can be continued this way -->
  </ul>

I suspect that this is - somehow - related to #1686 (which was assumed to be fixed)?

[dertuxmalwieder]

Fix Workaround: Wait a bit before toggling.

{
  //...
  onMove(evt, _originalEvent) {
        $(".drop-container:not(.dont-hide)").addClass("d-none");
        let menuItem = $(evt.related).closest('.menuItem');
        if (menuItem.length > 0) {
            menuItem.find('.drop-container:first').removeClass("d-none");
            menuItem.find('.drop-container:first').addClass("dont-hide");
            setTimeout(() => { $(".wm-dont-hide").removeClass("dont-hide"); }, 100);
        }
  },
}

However, this is far from a good solution in my opinion, or am I missing something?