x-for ordering is incorrect when used with Fuse.js and tablesort

[sumanthratna]

Issue

Changing the order of DOM elements (with a method other than alpine.js) and then re-rendering with a different order using Alpine.js, the resulting order is incorrect. This is shown more clearly in the repro

Reproduction

<script src="https://unpkg.com/alpinejs@3.9.0" defer></script>
<script src='https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js'></script>
<script src='https://unpkg.com/tablesort@5.3.0/dist/sorts/tablesort.number.min.js'></script>
<link rel="stylesheet" href="https://unpkg.com/tablesort@5.3.0/tablesort.css">
<script src="https://unpkg.com/fuse.js@6.5.3/dist/fuse.basic.min.js"></script>
<div x-data="table">
    <input type="search" x-on:input.debounce="filterRows($event.target.value)">
    <div>search results: </div><div x-text="filteredRows"></div>
    <table id="sort">
        <thead>
            <tr>
                <th data-sort-method="none">#</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <template x-for="index in filteredRows">
                <tr :id="'row-' + index">
                    <td x-text="index"></td>
                    <td x-text="entries[index].name"></td>
                </tr>
            </template>
        </tbody>
    </table>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        const data = Object.freeze([{
            ind: 0,
            name: "Gonzo the Great"
        },
        {
            ind: 1,
            name: "Ernie"
        },
        {
            ind: 2,
            name: "Bert"
        },
        {
            ind: 3,
            name: "Cookie Monster"
        },
        {
            ind: 4,
            name: "Kermit"
        },
        {
            ind: 5,
            name: "Sam the Eagle"
        },
        ]);
        const fuse = new Fuse(data, {
            keys: ['name']
        });

        Alpine.data('table', () => ({
            entries: data,
            filteredRows: data.map(entry => entry.ind),
            filterRows(searchQuery) {
                this.filteredRows = searchQuery === "" ? data.map(entry => entry.ind) : fuse.search(searchQuery).map(result => result.refIndex);
            },
        }));
    });

    new Tablesort(document.getElementById('sort'));
</script>

(codesandbox/jsfiddle are bit buggy with Alpine.js data for me so I don't have a runnable link)

1. Open the above HTML file
2. search "e" without sorting -- the resulting table is searched correctly, with indices ordered 1,2,4,3,5,0
3. refresh the page. sort the name column by clicking the header once (the table is now ordered 2,3,1,0,4,5). search "e". Above the table we see that the search results are still 1,2,4,3,5,0. However, Alpine renders 4,3,2,1,5,0

Potential Fix

• Maybe this is a bug in Alpine's rendering system that needs to be fixed. I tried looking through Alpine's source but I'm having trouble understanding the relevant code
• Maybe this isn't a bug in Alpine, in which case I would need to reset my DOM elements back to their un-sorted state before having Alpine update. If this is the case, an explanation on how to do this would be very helpful
  • the indices reported by the search are correct (shown by the div above the table), yet the ordering of the table rows is wrong. Therefore, it feels like this is a bug that should be resolved

[SimoTod]

I haven't checked but, if Alpine prints values in a certain order, there's no reason why x-for would shuffle them. Are you sure that it's not tableSort bug (note that your table is still meant to be sorted by name and alpine patch one item at the time, if tableSort shuffles the rows while Alpine is midway patching, it won't work really way: ideally you would call tablesort.refresh at the end of your filter function to make sure everything goes back to the right place).