[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:

https://github.com/SortableJS/Sortable/assets/125629/1f124408-b17d-4df0-8760-601ae2cb81d9

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?