Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[LiveComponent] Live properties in onUpdated hook are null... bug or normal behaviour? #1648

Closed
gremo opened this issue Mar 23, 2024 · 2 comments

Comments

@gremo
Copy link
Contributor

gremo commented Mar 23, 2024

In my QuantityControl component I need to adjust the value live property based on min and max live properties:

<twig:QuantityControl max="3" />

I have this following problem:

  • Calling adjustValue from a live action works, I can access max value
  • When adjustValue is called by the framework using the onUpdated hook... max is null
<?php

namespace App\Twig\Components;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\ComponentToolsTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;
use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;

#[AsLiveComponent]
class QuantityControl
{
    use DefaultActionTrait;

    #[LiveProp]
    public int $min = 0;

    #[LiveProp()]
    public ?int $max = null;

    #[LiveProp]
    public int $step = 1;

    #[LiveProp(writable: true, onUpdated: 'adjustValue')]
    public ?int $value = 0;

    #[LiveAction]
    public function up()
    {
        $this->value += $this->step;
        // $this->adjustValue(); // When called from up(), max property is not null
    }

    #[LiveAction]
    public function down()
    {
        $this->value -= $this->step;
        // $this->adjustValue(); // When called from down(), max property is not null
    }

    public function adjustValue(): void
    {
        // Here max property is null, despite being passed
        dd($this->max);
    }
}

The component twig if matters:

<div {{ attributes }}>
    <button data-action="live#action" data-live-action-param="up">
        +
    </button>
    <input data-model="value">
    <button data-action="live#action" data-live-action-param="down">
        -
    </button>
</div>
@smnandre
Copy link
Collaborator

This is something @weaverryan started to work. Originnaly the actions were not designed to be called from PHP, but this is somethings that has been asked several time, so he started to digg in this question.

Currently (and probably until 2.18) you're right: those hooks are only called once, during dehydration.

Stay tuned :)

@gremo
Copy link
Contributor Author

gremo commented Mar 24, 2024

Ok then, I'm going to close this as It seems a known issue or a missing feature!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants