ux icon indicating copy to clipboard operation
ux copied to clipboard

[LiveComponent] LiveProps not correctly updated from PostMount after updateFromParent

Open fGuix opened this issue 1 year ago • 1 comments

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(),
}) }}

fGuix avatar May 28 '24 10:05 fGuix

This is indeed the method suggested by the documentation: https://symfony.com/bundles/ux-live-component/current/index.html#child-components-keep-their-modifiable-liveprop-values

smnandre avatar Jun 04 '24 05:06 smnandre

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

carsonbot avatar Dec 05 '24 12:12 carsonbot