Issue with sort plugin and x-for

[nleter]

I have issue with x-for and sorting the elements.

I have an array that I want to sort using alpine x-sort plugin. Issue is that each element of the array has an x-model attribute to allow modification of that element.

Once I move element around, the array updates correctly but since the original element is moved in dom, x-model render the wrong position in the array.

I know that the issue is with using the index with x-model.

Codepen for reference: https://codepen.io/nlet/pen/qBwJJzg

[ekwoka]

You need to use unique keys on the x-for.

[hugozap]

I think there should be a warning added to the AlpineJS documents because the sort plugin won't work with x-for.
The problem lies in the x-for directive having an internal variable that keeps track of the order of items _x_prevKeys . Even if you update your array in the handler x-sort, the internal _x_prevKeys won't be updated in the template element and the order of items in the UI will differ.

You can solve the issue by re-setting that variable in the element that has the x-for (usually a template), it should contain the list of item "keys". So it should be usually done after applying the sorting changes to the array (when the sorting operation completes).

I think, the x-sort plugin should do that by default when it detects it's being used in combination with a x-for because it's the most common scenario.

[ekwoka]

🤔 it does make a lot of sense

[Arifursdev]

@hugozap

You can solve the issue by re-setting that variable in the element that has the x-for (usually a template), it should contain the list of item "keys". So it should be usually done after applying the sorting changes to the array (when the sorting operation completes).

with plugin as it is, do you have an example code of how you would solve the issue with x-for?

I think, the x-sort plugin should do that by default when it detects it's being used in combination with a x-for because it's the most common scenario.

truly!

Thanks!

[hugozap]

@Arifursdev Here's an small example using sortable.js directly. I tried to use the sort plugin but had issues with the scope in the handler function. The idea is the same though but i recommend just using sortable.js as the plugin seems broken to me.

https://codesandbox.io/p/sandbox/alpine-xfor-sort-fix-pj2z7n?file=%2Findex.html%3A1%2C1-65%2C1

(If you comment the line that sets _x_prevKeys and sort the items and then try to add a new one, the new position will be incorrect. This also happens with the plugin.

[Arifursdev]

@hugozap that makes sense! Thanks!

[romanberdnikov]

The sort plugin also looks broken to me (just because I can't access this.$store directly).

Another approach is to have a "sort" button or up/down buttons near every element.
Doesn't look pretty for user, but does it's job.

Up/Down buttons:

<div class="items-sort">
   <button x-show="$store.items.length > 1 && index > 0" @click="moveUp(index)" type="button">
   ^
   </button>
   <button x-show="$store.items.length > 1 && (index + 1) != $store.items.length" @click="moveDown(index)" type="button">
   v
   </button>
</div>

document.addEventListener("alpine:init", () => {
        init() {
            Array.prototype.move = function (from, to) {
                this.splice(to, 0, this.splice(from, 1)[0]);
            };
        },
        moveUp(index) {
            this.$store.items.move(index, index - 1);
        },
        moveDown(index) {
            this.$store.items.move(index, index + 1);
        },
});

Sort button:

<button @click="sortItems" type="button">
Sort by time
</button>

document.addEventListener("alpine:init", () => {
        sortItems() {
            this.$store.items.sort(function (a, b) {
                return a.time - b.time; /* time - any other key in array */
            });
        }
});

[romanberdnikov]

@romanberdnikov as the example given by @hugozap

There is no delete button

[Arifursdev]

There is no delete button

deleteItem(index) {
    this.$store.items.splice(index, 1);
}

[romanberdnikov]

You can't access Alpine from the sort plugin directly. So after sorting items, they actually won't change their order (only visually in DOM).

Delete functionality brings another problem with the _x_prevKeys. It won't be able to find the last stored key

[khanhicetea]

Thanks, updating _x_prevKeys of template element does the trick.

My try : https://jsbin.com/jijirigiya/edit?html,console,output

[kevariable]

@khanhicetea you save my time !, thank you so much. after struggle 2 days on this

[ekwoka]

This is solved with #4361

[dimitri-koenig]

Hi guys

I finally found a solution that works without issues so far. The trick is to give random :keys in the x-for template tag. I do this by incrementing a sortIteration variable every time the sort handler is called. That way a rerender is forced.

<div x-data="columnSorting">
    <ul x-sort="handleSortOrder">
        <template x-for="column in selectedColumns" :key="sortIteration + column">
            <li x-sort:item="column">
                <span x-text="column"></span>
            </li>
        </template>
    </ul>
</div>

Alpine.data('columnSorting', () => {
    let self;

    return {
        selectedColumns: ['item1', 'item2', 'item3'],

        sortIteration: 0,

        init() {
            self = this;
        },

        handleSortOrder(item, newIndex) {
            let currentIndex = self.selectedColumns.indexOf(item);

            self.selectedColumns.splice(currentIndex, 1);
            self.selectedColumns.splice(newIndex, 0, item);

            self.sortIteration++;
        },
    }
});

Since I don't get access to the alpine store data object using "this", I have to declare a self variable outside of the object. Hacky workaround, but works. Hope that helps anyone.

[IMythx]

you could access the this without the need for the self (or the way you did it) by binding the handle function to $data magic variable which is basically the Alpine.data

  <ul x-sort="handleSortOrder.bind($data)">
        ...
  </ul>