[LiveComponent] [ChartJS] Updating a parent component triggers its re-render and throws the error Canvas is already in use in console

[Narthall]

I think it is mainly related to LiveComponent, but I'm encountering this when trying to make it interact with ChartJS, so... here's the deal.

I was trying to make the following example work: https://ux.symfony.com/demos/live-component/chartjs with a slight twist, since I'll be creating a new, specific and re-usable type of chart (a Gantt Chart to be precise), I'll be embedding the chart in its own component.

So, I have a main component, DashboardWidget:

<?php

// Ignore namespace and imports

#[AsLiveComponent]
class DashboardWidget extends AbstractController
{
    use DefaultActionTrait;

    private const NAME = 'UserGanttChart';

    public const TITLE = "User presence";

    #[LiveProp]
    public string $invokerName = self::NAME;

    #[LiveProp]
    public string $widget_title = self::TITLE;

    #[LiveProp(writable: true)]
    public DateTimeImmutable $startDate;

    #[LiveProp(writable: true)]
    public DateTimeImmutable $endDate;

    public function __construct(
        private readonly EntityManagerInterface $em,
        private readonly ChartBuilderInterface $chartBuilder,
    ) {
        $this->startDate = (new DateTimeImmutable())->sub(new DateInterval('P15D'))->setTime(0, 0);
        $this->endDate = (new DateTimeImmutable())->add(new DateInterval('P15D'))->setTime(0, 0);
    }

    #[ExposeInTemplate]
    public function getData(): GanttChartData // Note that this is just a simple model so my data will respect ChartJS' specificities
    {
        /* @var User[] $allUsers */
        $allUsers = $this->em->getRepository(User::class)->findAll();
        return new GanttChartData(...$allUsers);
    }

    #[LiveListener('duration:changed:'.self::NAME)]
    public function onDurationChanged(
        #[LiveArg] DateTimeImmutable $startDate,
        #[LiveArg] DateTimeImmutable $endDate,
    ): void {
        $this->startDate = $startDate;
        $this->endDate = $endDate;
    }
}

And, in this Component, I have the GanttChart as a child component.

<div {{ attributes }} class="widget_tile">
    <twig:GanttChart 
        :ganttChartData="data"
        :startDate="startDate"
        :endDate="endDate"
    />
</div>

Now, I separated the form allowing me to set the startDate and the endDate from the component so I could load it in a modal that's rendered at the end of the body. When I change the startDate or the endDate in this modal, it dispatches the event duration:changed:UserGanttChart to the parent component, which changes its data. And then it passes them down to the child component.

If I listen to the event duration:changed:UserGanttChart directly in my GanttChart component, everything's alright.

But if I do it the way I want to, that is to say listen to the event in my parent component, update its props and pass them down to the child component, once the Live Action is triggered and my props updated, my child component's stimulus controller gets disconnected, then so does the symfony--ux-chartjs--chart controller, then they try to connect once again, before throwing the following error:

Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.

Nevertheless, the chart is updated.

I would like to know if this is normal behavior or if there is something I'm doing wrong.

[WebMamba]

Hummmm could you share a reproducer? Do you have ideas of why the stimulus controller is disconnect ?

[carsonbot]

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Friendly ping? Should this still be open? I will close if I don't hear anything.

[carsonbot]

Hey,

I didn't hear anything so I'm going to close it. Feel free to comment if this is still relevant, I can always reopen!