Wrong newIndex when in nested dom-repeat list

[JaySunSyn]

Sometimes when dragging items down, the event shows a newIndex of 0 which is the wrong index.
It comes most often when dragging the first element to the button of the same group.

<template is="dom-repeat" id="camerasList" items="{{cameras}}">
  <!-- groups -->
  <p>{{item.group.name}}</p>
  <sortable-list id="{{item.group.id}}" group="grouped" animation="150">

    <template is="dom-repeat" items="{{item.cams}}">
      <!-- cams -->
      <div id="{{item.id}}">{{item.name}}</div>
    </template>

  </sortable-list>
</template>

[davidmaxwaterman]

While not quite the same as what you have, I have struggled a lot when combining sortable-list with dom-repeat.

I have found that dom-repeat keeps a reference to each of the sortable-items and it expects them to remain in that order. Sortable-list, of course, changes the order.
So, my solution is to, in the sortEnd handler:

1. record the new order of the sorted items,
2. put the items back into the order dom-repeat expects them to be,
3. update the dom-repeat 'models' of the sorted items to the new order, and then let dom-repeat sort them.

Something like this:

  <sortable-list id="sortableList" sortable=".sort-item" on-sort-end="_onSortEnd">
    <template id="domRepeat" is="dom-repeat" items="[[_myItems]]" sort="_sortItems" observe="sortOrder">
      <div class="sort-item">[[item.sortOrder]]</div>
    </template>
  </sortable-list>

  _onSortEnd(event) {
    const {newIndex, oldIndex} = event.detail;
    const items = this.$.sortableList.querySelectorAll('.sort-item');
    const order = items.map((item) => item.sortOrder);

    // put the element back in the order dom-repeat expects them to be
    {
      const parent = this.$.sortableList;
      if (oldIndex < newIndex) {
        parent.insertBefore(items[newIndex], items[oldIndex]);
      } else {
        parent.insertBefore(items[newIndex], items[oldIndex].nextSibling);
      }
    }

    // update _myItems to reflect the new order
    {
      const newMyItems = this._myItems;
      newMyItems.sort((a,b) => order.indexOf(a.sortOrder) - order.indexOf(b.sortOder));
      this.set('_myItems', newMyItems);
    }

    // update the dom-repeat model
    const domRepeat = this.$.domRepeat;
    items.forEach((item, index) => {
      const model = domRepeat.modelForElement(item);
      model.set('item', {...model.item, sortOrder:index});
    });
  }

I probably made some mistakes there so it'll still need some fiddling, but yeah.

FWIW, I use sortable-list in two places, and I gave up trying to find the 'correct' solution in my first attempt and instead dropped dom-repeat altogether and instead just managed the list of items myself, which worked fine. I consider the above technique better, though, for some reason.