[LiveComponent] All onUpdated methods are triggered

[jkgroupe]

Hello,

I am using live components on Symfony 6.4 and when I add onUpdated parameters, all methods are triggered when I update just one element

Live Component

#[AsLiveComponent]
class RevenueChart
{
    use DefaultActionTrait;

    #[LiveProp(writable: true, onUpdated: 'onChangeYear')]
    public ?int $currentYear = null;

    #[LiveProp(writable: true, onUpdated: 'onChangeTarget')]
    public float $currentTarget = 0.0;

    public function onChangeTarget($oldValue): void
    {
        var_dump($oldValue);
    }

    public function onChangeYear($oldValue): void
    {
        var_dump($oldValue);
    }
}

Twig
<select data-model="on(change)|currentYear" id="year"></select>

<input type="number" data-model="on(change)|currentTarget" class="form-control" id="target" />

I don't know if I'm missing something but it doesn't work in my case

Thanks for your help

[smnandre]

I could not reproduce your problem, could you provide a github repository with a minimal symfony app showing the issue happenign ?

[jkgroupe]

Hello, I've reproduced this issue with UX demo. I don't know if this is a normal behavior but all events are triggered when I change just one field value

Hope it can help

src/Twig/Components/DinoChart.php

<?php

namespace App\Twig\Components;

use App\Service\DinoStatsService;
use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
use Psr\Log\LoggerInterface;

#[AsLiveComponent]
class DinoChart
{
    use DefaultActionTrait;

    #[LiveProp(writable: true, onUpdated: 'onTypesUpdated')]
    public array $currentTypes = ['all', 'large theropod', 'small theropod'];

    #[LiveProp(writable: true, onUpdated: 'onFromYearUpdated')]
    public int $fromYear = -200;

    #[LiveProp(writable: true, onUpdated: 'onToYearUpdated')]
    public int $toYear = -65;

    public function __construct(
        private DinoStatsService $dinoStatsService,
        private ChartBuilderInterface $chartBuilder,
        private LoggerInterface $logger,
    ) {
    }

    #[ExposeInTemplate]
    public function getChart(): Chart
    {
        $chart = $this->chartBuilder->createChart(Chart::TYPE_LINE);
        $chart->setData($this->dinoStatsService->fetchData(
            $this->fromYear,
            $this->toYear,
            $this->currentTypes
        ));

        $chart->setOptions([
            // set title plugin
            'plugins' => [
                'title' => [
                    'display' => true,
                    'text' => \sprintf(
                        'Dinos species count from %dmya to %dmya',
                        abs($this->fromYear),
                        abs($this->toYear)
                    ),
                ],
                'legend' => [
                    'labels' => [
                        'boxHeight' => 20,
                        'boxWidth' => 50,
                        'padding' => 20,
                        'font' => [
                            'size' => 14,
                        ],
                    ],
                ],
            ],
            'elements' => [
                'line' => [
                    'borderWidth' => 5,
                    'tension' => 0.25,
                    'borderCapStyle' => 'round',
                    'borderJoinStyle' => 'round',
                ],
            ],
            'maintainAspectRatio' => false,
        ]);

        return $chart;
    }

    #[ExposeInTemplate]
    public function allTypes(): array
    {
        return DinoStatsService::getAllTypes();
    }

    public function onFromYearUpdated(): void
    {
        $this->logger->error("on from year updated");
    }

    public function onToYearUpdated(): void
    {
        $this->logger->error("on to year updated");
    }

    public function onTypesUpdated(): void
    {
        $this->logger->error("on types updated");
    }
}

templates/components/DinoChart.html.twig

<div {{ attributes }}>
    <div class="row">
        <div class="col-2">
            <label for="fromYear" class="form-label">
                From: <code><small>({{ fromYear|abs }} mya)</small></code>
            </label>
            <select data-model="fromYear" id="fromYear" data-controller="symfony--ux-autocomplete--autocomplete">
                {% for year in -200..toYear %}
                    <option value="{{ year }}">{{ year }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="col-2">
            <label for="toYear" class="form-label">
                To: <code><small>({{ toYear|abs }} mya)</small></code>
            </label>
            <select data-model="toYear" id="toYear" data-controller="symfony--ux-autocomplete--autocomplete">
                {% for year in fromYear..-65 %}
                    <option value="{{ year }}">{{ year }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="col-8">
            <label for="dinoTypes" class="form-label">Choose Dino Types</label>
            <select
                data-model="currentTypes"
                multiple
                id="dinoTypes"
                data-controller="symfony--ux-autocomplete--autocomplete"
            >
                {% for type in allTypes %}
                    <option value="{{ type }}">{{ type }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <hr>

    <div style="min-height: 480px; margin-bottom: 1.5rem;">
        {{ render_chart(chart) }}
    </div>

    <small>Source:
        <a href="https://www.nhm.ac.uk/" class="link">National History Museum</a> courtesy of
        <a href="https://github.com/kjanjua26/jurassic-park" class="link">https://github.com/kjanjua26/jurassic-park</a>
    </small>
</div>

Logs when I updated one field

POST request

-----------------------------199506608811236724691681381630
Content-Disposition: form-data; name="data"

{"props":{"currentTypes":["all","large theropod","small theropod","ceratopsian"],"fromYear":-200,"toYear":-89,"@attributes":{"id":"live-895539465-0"},"@checksum":"wPd53Ju4RJcoKHAW45ly6OCMsfZ1JsfZZRI5zq/6K4c="},"updated":{"fromYear":"-193","toYear":"-89"}}
-----------------------------199506608811236724691681381630--

[smnandre]

I tried with the demo and everything works as expected. One event per field.

Enregistrement.de.l.ecran.2025-01-08.a.04.17.13.mov

With your code, any change in fromYear has impact on the toYear select... and any change in toYear has an impact on the fromYears select... in some way you try to change your LiveProps by changing the HTML, and this cannot be done that way.

 <select data-model="fromYear" id="fromYear" data-controller="symfony--ux-autocomplete--autocomplete">
    {% for year in -200..toYear %}
         <option value="{{ year }}">{{ year }}</option>
    {% endfor %}
</select>

Also it seems you added an autocomplete on both ? Having both autocomplete and cross-changes in the HTML at the same time is not helping i suppose.

[jkgroupe]

That works if I have 2 range fields and 1 select field but I still have the issue if I have more than 1 select even if I remove autocomplete controllers

<div class="col-2">
    <label for="fromYear" class="form-label">
        From: <code><small>({{ fromYear|abs }} mya)</small></code>
    </label>
    <select data-model="fromYear" id="fromYear">
        {% for year in -200..toYear %}
            <option value="{{ year }}">{{ year }}</option>
        {% endfor %}
    </select>
</div>

<div class="col-2">
    <label for="toYear" class="form-label">
        To: <code><small>({{ toYear|abs }} mya)</small></code>
    </label>
    <select data-model="toYear" id="toYear">
        {% for year in fromYear..-65 %}
            <option value="{{ year }}">{{ year }}</option>
        {% endfor %}
    </select>
</div>

<div class="col-8">
    <label for="dinoTypes" class="form-label">Choose Dino Types</label>
    <select
        data-model="currentTypes"
        multiple
        id="dinoTypes"
    >
        {% for type in allTypes %}
            <option value="{{ type }}">{{ type }}</option>
        {% endfor %}
    </select>
</div>

[smnandre]

Replace

 <select data-model="fromYear" id="fromYear">
        {% for year in -200..toYear %}
            <option value="{{ year }}">{{ year }}</option>
        {% endfor %}
    </select>
</div>

<div class="col-2">
    <label for="toYear" class="form-label">
        To: <code><small>({{ toYear|abs }} mya)</small></code>
    </label>
    <select data-model="toYear" id="toYear">
        {% for year in fromYear..-65 %}
            <option value="{{ year }}">{{ year }}</option>
        {% endfor %}
    </select>

with

 <select data-model="fromYear" id="fromYear">
        {% for year in -100..0 %}
            <option value="{{ year }}">{{ year }}</option>
        {% endfor %}
    </select>
</div>

<div class="col-2">
    <label for="toYear" class="form-label">
        To: <code><small>({{ toYear|abs }} mya)</small></code>
    </label>
    <select data-model="toYear" id="toYear">
        {% for year in 0..100 %}
            <option value="{{ year }}">{{ year }}</option>
        {% endfor %}
    </select>

Do you still have the problem ?

[jkgroupe]

Yes I still have the issue

[bartvdlaan]

The issue you're encountering is due to the model being bound to an HTMLSelectElement (<select>). There's a specific case in the component setup logic that checks whether the element associated with a model field is a <select>. If it is—and the multiple attribute is not set—the component immediately marks the value as "dirty".

As a result, when the LiveComponent eventually sends a request to the backend, these "dirty" models are treated as if they've been updated, even if the user hasn't interacted with them.

You can see this behavior around line 2896 in the assets/dist/live_controller.js file:

if (element instanceof HTMLSelectElement && !element.multiple) {
    component.valueStore.set(modelName, getValueFromElement(element, component.valueStore));
}

My assumption is that this logic was added to ensure that default values of <select> elements are always submitted to the backend, even if the user doesn’t change them. Without this, like when the model is bound to a form—when using something like ComponentWithFormTrait for example—will not submit the select’s value at all if left unchanged.

The first (and only) argument given to the onUpdate method is the old value. So you can check if the value was really updated by comparing the old value with the new value. Like this:

    public function onFromYearUpdated(int $oldFromYear): void
    {
        if ($oldFromYear !== $this->fromYear) {
            $this->logger->error("on from year updated");
        }
    }

    public function onToYearUpdated(int $oldToYear): void
    {
        if ($oldToYear !== $this->toYear) {
            $this->logger->error("on to year updated");
        }
    }