Add failing test for x-for after back with wire:navigate

[gehrisandro]

This PR adds a failing test for x-for after the back button is used with wire:navigate.

Given the following code:

<div x-data="{ items: ['item 1', 'item 2', 'item 3'] }">
    <template x-for="item in items" :key="item">
        <div class='item' x-text="item"></div>
    </template>

    <a href="/second" wire:navigate dusk="link">Go to second page</a>
</div>

After navigating to the second page and returning back by using the browsers "back" button. There are six .item divs in the DOM and there are three warnings and three errors in the console.

[gehrisandro]

I was able to trace this down a little.

It looks like when x-for updates, it creates all elements based on an index and tries to find existing items based on a value stored on the template element in the attribute _x_prevKeys.

When using wire:navigate only the raw HTML gets stored to the session storage. Therefore _x_prevKeys is empty when restoring the DOM from the session storage.

If I do manually remove the rendered div elements from the session storage before hitting the back button everything seems to work fine. So I think there are two options how to proceed:

1. We need to store and restore the value of _x_prevKeys before saving the HTML to the session storage.
2. We could use the cleanup() function on the x-for directive before storing the HTML.

As I don't know if I am on the right track I would like to hear your opinions before proceeding. @calebporzio

Update: Looks like there is a workaround for this: #6849 (reply in thread)
But I think we should fix this properly. 😅

[robsontenorio]

Following along, just ran into this issue

[robsontenorio]

Did you guys found any workaround?

[mybouhssina]

@robsontenorio I add a class like 'to-remove-before-navigating' to every child in x-for (or any other element that cause this kind of problems), and add the following script:

 document.addEventListener('livewire:navigating', () => {
    document.querySelectorAll('.to-remove-before-navigating').forEach(el => {
        el.remove();
    });
});

I'm pretty sure I've found this code on some other issue/discussion but I'm not sure where.

[robsontenorio]

@mybouhssina I am using that hack... pretty annoying :(

[mybouhssina]

@robsontenorio yeah it's pretty annoying, but much better than the errors whenever I press the back button ^^'
Hope there will be a fix soon !

[calebporzio]

Good points. I think the answer here is doing this in the cleanup() of x-for. I would welcome a PR for that on Alpine!

[gehrisandro]

Good points. I think the answer here is doing this in the cleanup() of x-for. I would welcome a PR for that on Alpine!

Okay. I can give it a try.

[robsontenorio]

Hey @gehrisandro

Have you sent another PR to handle this ?

[danie-ramdhani]

isn't it navigate plugin (x-navigate or wire:navigate) only available on livewire?
alpinejs/alpine#3720
shall we reopen this PR?

[danie-ramdhani]

nvm this happened in alpine + htmx too (alpinejs/alpine#2924)

[gehrisandro]

Hey @gehrisandro

Have you sent another PR to handle this ?

No, not yet. I am busy with other stuff but maybe I will come back to this one later.

[danie-ramdhani]

fixed alpinejs/alpine#4015