Issues Managing Symfony CollectionType with Stimulus and Live Components

[TomoyaHamasaki]

Initially, I used Symfony’s built-in delete functionality to remove segments from the collection. However, due to the complexity of the collection—each segment contains multiple nested fields and dynamic behaviors—the process was slow, causing a frustrating delay for users when managing multiple segments.

To improve the experience, I tried combining Stimulus and Symfony UX Live Components:

• Stimulus would handle immediate DOM updates, such as visually removing or hiding the deleted segment.
• Live Components would asynchronously process the deletion on the backend and re-render the form.

However, this introduced new challenges:

1. Rerendering Conflicts: When deleting multiple segments quickly, previously deleted segments sometimes reappear. This seems to happen because Live Components trigger a full form re-render after each backend operation. If a new delete action is initiated before the previous one completes, the re-render brings back the deleted segment.
2. State Disruptions: Every re-render resets the UI, collapsing accordion panels and disrupting the user experience.

I’m starting to wonder if I’m missing something in the documentation. Are Live Components not intended for managing complex forms like this? Or is there a better way to manage state and performance for this type of dynamic, nested form? I'm hoping it's a result of misuse.

Here’s a simplified example of what I’m trying to achieve:

Twig

<div
    id="segment-manager"
    {{ stimulus_controller('segment-manager', { liveComponentId: 'segment-manager' }) }}
>
    {{ form_start(form) }}
        <div id="segments" {{ stimulus_target('segment-manager', 'fields') }}>
            {% for segment in form.segments %}
                <div class="segment" {{ stimulus_target('segment-manager', 'field') }}>
                    <h3>{{ segment.title.vars.value }}</h3>
                    
                    <!-- Example of nested fields -->
                    {{ form_row(segment.content) }}
                    {{ form_row(segment.settings) }}

                    <!-- Delete Button -->
                    <button type="button"
                        {{ stimulus_action('segment-manager', 'deleteItem', { index: loop.index0 }) }}
                    >
                        Delete
                    </button>
                </div>
            {% endfor %}
        </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}
</div>

Live Component

#[AsLiveComponent(template: 'components/SegmentManager.html.twig')]
class SegmentManager
{
    use ComponentWithFormTrait;

    #[LiveProp]
    public $formData;

    protected function instantiateForm(): FormInterface
    {
        return $this->createFormBuilder($this->formData)
            ->add('segments', CollectionType::class, [
                'entry_type' => SegmentType::class,
                'allow_add' => true,
                'allow_delete' => true,
                'by_reference' => false,
            ])
            ->getForm();
    }

    #[LiveAction]
    public function deleteItem(#[LiveArg] int $index): void
    {
        unset($this->formValues['segments'][$index]);
    }
}

Stimulus

import { Controller } from '@hotwired/stimulus';
import { getComponent } from '@symfony/ux-live-component';

export default class extends Controller {
    static targets = ['field'];
    static values = { liveComponentId: String };

    async initialize() {
        if (!this.liveComponentIdValue) return;
        this.component = await getComponent(document.getElementById(this.liveComponentIdValue));
    }

    removeItem(event) {
        const targetField = this.fieldTargets.find((field) => field.contains(event.target));
        if (!targetField) return;

        const index = this.fieldTargets.indexOf(targetField);
        targetField.remove();

        if (this.component) {
            this.component.action('deleteSection', { index });
        }
    }
}