[LiveComponent] nested live component morphing not work on page 2

[tito10047]

Hi, when I paginate live componet with nested live form. than morphing is not working on page 2;

See this example https://bug-nested.vsetkosada.sk/ . when you click on load more second time, first two pages disappear.

here is code https://github.com/tito10047/ux-live-nested/tree/main/src/Twig/Components
There are only two components. nothing else. Im grab the content from official demo to simulate bug.

Is this bug? or I do something wrong.

[smnandre]

You should read this (and part 2 is almost there :) ) : https://ux.symfony.com/demos/live-component/infinite-scroll

[tito10047]

Hi, I read that. my demo is from that. And normal its work. But when I use nested live form, than is stoped working.
So, should I wait to part 2 of that tutorial?

[smnandre]

Ok that seems a bit more complicated because you did remove the livecomponent from the DOM... so it was disconnected :|

Not sure why it's only 50% of the time, but i'm not "that" surprised ... :|

[smnandre]

Did you try

• with an ID instead of the key for the children components ?
• with a prefix before the id/key ?
• adding the datalive-ignore (should not but ..)

i think i get what’s happening i’ll look this week-end if none of the tests works

[tito10047]

Nothing from above did not help.

[smnandre]

So i have a solution (but i'm pretty sure this cannot work for more complex structures)

Created a repository (based on your reproducer) if you want to check / run it : smnandre/ux-live-nested

Not promising i'll keep it eternally so i explain there too (for anyone reading this in the future)

---

I changed a bit your id/keys but from that you can i think go back to your original values

{# Current page #}
<div class="ProductGrid_page" id="page--{{ page }}" data-live-ignore="true">
    {# Current page ALL results #}
    {% for key, item in this.items %}
    
        {# Current page result #}
        <article class="ProductGrid_item" id="item--{{ page }}--{{ key }}">
            <twig:MyForm key="item--{{ page }}--{{ key }}" />
        </article>
        
    {% endfor %}
</div>

And here is the solution

{% if page > 1 %}
    {# 🐼🐼 Apply the same trick recursively 🐼🐼 #}

    {# ALL previous pages #}
    {% for _page in 1..(page - 1) %}
    
        {# Fake page #}
        <div class="ProductGrid_page" id="page--{{ _page }}" data-live-ignore="true">
        
            {# Fake page LAST resut #}
            <article class="ProductGrid_item" id="item--{{ _page }}--{{ per_page - 1 }}"></article>
            
        </div>
        
    {% endfor %}
{% endif %}

---

PS: i already refactored some of the Infinite Scroll demo and will do it again soon.. so there is probably other/better solutions here.. we're all learning everyday :))

[tito10047]

Thanks, that works :) .