Order of elements not updating on change items

[timur560]

Code:

<sortable-list class="items-sortable" on-sort-finish="_onSortFinish" dragging="{{dragging}}"
          sortable=".item" items="{{someItemsSorted}}">
  <template is="dom-repeat" items="[[itemsUpdatableFromApi]]">
    <div class="item"> ....
  ...
...

This issue is that when itemsUpdatableFromApi variable is changing, and the order of them changed, the order of items in component keep not changed. However, the data in items is updating correctly.

To clarify the issue I will describe steps:

1. Items in sortable-list:

<div id="51">1</div>
<div id="52">2</div>
<div id="53">3</div>

2. Move item with id 53 up:

<div id="51">1</div>
<div id="53">3</div>
<div id="52">2</div>

3. Send API request on on-sort-finish to change the priorities (sort order)
4. Update the items (in code above we just change the property itemsUpdatableFromApi with data, fetched from API)

<div id="51">1</div>
<div id="52">3</div>
<div id="53">2</div>

So, the id is changed and this is the correct data, but the order of displaying should be changed too. Because from API I receive items correctly ordered by priority (1,2,3)). But when I refresh the page, the order of items is correct:

<div id="51">1</div>
<div id="53">2</div>
<div id="52">3</div>

[robrez]

it would be useful if the sort-finish event included the indices of the swapped elements, then the consumer would have an easy way to update the array used by a dom-repeat;

[RoXuS]

+1 Same issue here

[RoXuS]

@timur560 I made a fork which avoid the dom changes, so the issue is solved (only in this case of we use an API to apply the sort). See https://github.com/RoXuS/sortable-list/commit/555c68c3d83b46c7ab8eb1db33829f55057738d7.

On sort-finish event you have to apply the change on the array by using the new properties items from event ->

  _onSortFinish(event) {
    const myArray = [];
    event.detail.items.forEach((element, elementIndex) => {
...
  }

[davidmaxwaterman]

This has been driving me up the wall (too). @RoXuS 's fork has shown me the way, but unfortunately I can't use it directly because it includes several modifications to the styling. I was going to add a PR, but it seems there are several already that perhaps attempt the same thing, so I'll just add my fork here in case it is useful (same as RoXuS', but reverting some changes): https://github.com/davidmaxwaterman/sortable-list