symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony

Home Page:https://ux.symfony.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[LiveComponent] LiveProps not correctly updated from PostMount after updateFromParent

fGuix opened this issue · comments

commented

Context:
I have 2 components with one nested in the other:

class LessonListContainerComponent
{
    // ...
    #[LiveProp]
    public array $filters = [];
    // ... some actions that change the filters
}
// ...
    {{ component('lesson-list',{
        filters: filters
    }) }}
// ...
class ListComponent
{
    // ...
    #[LiveProp(updateFromParent: true)]
    public array $filters = [];
    
    #[LiveProp(writable: true)]
    public array $listIds = [];
    
    #[PostMount]
    public function initList(): void
    {
        // modifying listIds depending on the filters
        $listIds = XX;
    }

    // getting the object list based on what was computed in initList()
    public function getList(): array
    {
        if (!empty($this->listIds)) {
            return $this->someRepository->findBy(['id' => $this->listIds]);
        }

        return [];
    }

    // ... actions for paginations and other stuff
}

Problem (?)
I debugged and here are my observations:

  • PostMount method initList() is correctly called at first render and listIds value correctly computed.
  • When I change the filters in the parent component, the child component get correctly the new filters value.
  • The postMount initList() method is called on filters update and the value of listIds is recomputed and set.
  • When calling getList() later in the template (for re-render after filters changed), the value of listIds is not the value that was recomputed in postMount, but the value computed at first render (also in postMount).

Questions
Is this the expected behavior ? It feels weird that the LiveProp is not updated the second time the PostMount method is called (and all subsequent calls).

Workaround
I force the re-render of the child component with an id.

{{ component('lesson-list',{
    filters: filters,
    id: this.generateNewListId(),
}) }}