symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony
https://ux.symfony.com/
MIT License
835 stars 306 forks source link

[LiveComponent] LiveProps not correctly updated from PostMount after updateFromParent #1868

Open fGuix opened 4 months ago

fGuix commented 4 months ago

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:

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(),
}) }}
smnandre commented 4 months ago

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