Component not correctly rendered

[Valharault]

Bug Report: Intermittent Product Card Component Rendering Failure

Description of the Problem

The ProductList component occasionally fails to properly render ProductCard components, resulting in empty divs with only IDs being output instead of the full product card content. This occurs within a nested loop structure that renders product cards for different categories and subcategories.

Expected Behavior

• Each product in the subcategories loop should render a complete ProductCard component with all product information displayed
• The component should consistently render for all products in the list

Actual Behavior

• Sometimes only empty divs with IDs are rendered instead of the full ProductCard component
• The issue appears to be intermittent and doesn't affect all products simultaneously
• No error messages are displayed in the console or logs

Code Example

{% for parentCategory in this.organizedProducts %}
    {% for subcategory in parentCategory.subcategories %}
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4 sm:gap-6">
            {% for product in subcategory.products %}
                {{ component('Marketplace:ProductCard', {
                    productData: product,
                    restaurantId: restaurantId,
                    key: product.id,
                    quantity: product.cartQuantity,
                    id: 'product-card-'~product.id~product.cartQuantity,
                }) }}
            {% endfor %}
        </div>
    {% endfor %}
{% endfor %}

Additional Information

• The issue is inconsistent and difficult to reproduce reliably
• When the bug occurs, the DOM shows:

  <div id="product-card-123456"></div>

  Instead of the full product card markup

Environment

• Symfony UX version: v2.22.1
• Symfony version: 6.4

Questions for Investigation

1. Could this be related to the component's lifecycle management?
2. Is there a race condition in how the components are initialized?
3. Could the issue be related to how the product data is being passed to the component?

Additional Context

I'm currently unable to provide a minimal reproduction repository due to the intermittent nature of the issue. I'll continue attempting to create a reliable reproduction case and update the issue when available.

---

💡 If you need any additional information or clarification, please let me know. I'm happy to provide more details or investigate specific aspects of the problem.

[smnandre]

{
    ...
    key: product.id,
    quantity: product.cartQuantity,
    id: 'product-card-'~product.id~product.cartQuantity,
}

Just in case, did you check you have no duplicate id (due to the concatenation of product.id and product.cartQuantity)

id: 2      cartQuantity: 10     =>  210
id: 21     cartQuantity: 0      =>  210

(same if you have a cartQuantity resolving to null or false)

Anyway, I would not use cartQuantity as id / part of id, as it seems something that could change between re-renders.

[Valharault]

Thanks for your fast reply,

In my case this product.id is an UUID v4 and will never collate with another one.
This cartQuantity is useful for us cause we have another component inside the productCard .. i've try to remove this but the bug continue to appear randomly ..

Perhaps it has something to do with performance and too much ProductCard loaded on the same ?

[WebMamba]

Are we talking about LiveComponent ? Could you share you PHP component class ?

[smnandre]

With no way to reproduce, i fear it will be hard to investigate.

Just sharing personal experience, most of the time this kind of glitches are due to malformed HTML... or anything blocking morphing to happen correctly.

Could you try with data-skip-morph on your wrapping div ? See if the bug still happen ?

(https://symfony.com/bundles/ux-live-component/current/index.html)

[YummYume]

Experiencing the same kind of issue here, I'll try to make a reproduction later but in the meantime, here's how it looks like :

{# DisplayComponent (Live component, not a form) #}
<div {{ attributes.defaults }}>
    {# Tabs to switch the condition... #}

    <section id="display-form-view" data-skip-morph>
        {% if condition1 %}
            {# Live component with a form #}
            <twig:Display:FirstForm key="display-first-form" :event="event" />
        {% elseif secondCondition %}
            <p>Normal view</p>
        {% else %}
            {# Live component with a form #}
            <twig:Display:SecondForm key="display-second-form" :event="event" />
        {% endif %}
    </section>
</div>

What is happening is that without the data-skip-morph, when I change tabs, the live components get morphed, but because of that, I think the live controller is never disconnected, and you end up getting errors like invalid model name because the live controller is in a bad state (it's keeping state from the previous form ?).

Now with the data-skip-morph, this issue gets resolved because the live controllers are properly disconnected each time, but instead when I click on some tabs, the nested live components just disappear. If I click again, they re-appear, then disappear again when I click... It happens after any kind of re-render, even one that literally changed nothing.

The easiest fix is to wrap each nested component in a div and remove the data-skip-morph attribute. With that, the morphing doesn't preserve the live controllers between renders. Very weird stuff.

[smnandre]

The easiest fix is to wrap each nested component in a div and remove the data-skip-morph attribute. With that, the morphing doesn't preserve the live controllers between renders. Very weird stuff.

Yep, or the morph think the second is the first and vice-versa.