[LiveComponent] ComponentWithForm prevent onUpdated to be triggered

[Nek-]

If you have a component that is based on a form, and you expect your form to be updated on a data coming from the parent component (using updateFromParent) you have all the chances your component will never see the method defined in onUpdated triggered because your form may be invalid and therefore cancel any update of the component.

I noticed it is the origin of many weird errors (of data disappearing for example).

I suggest everybody to fix it this way:

    // Constructor of my component
    public function __construct()
    {
        // Avoid submitting sometimes empty data
        // also avoid so much errors
        $this->shouldAutoSubmitForm = false;
    }

[Nek-]

After fixing many bugs I figure out that the shouldAutoSubmitForm = false is a SUPER BAD IDEA. It actually brings more bugs that it fixes!

If you have issues due to data partially filled, you should try to update $this->formValues, it may fix your problems!

[smnandre]

Thanks for sharing!

[Nek-]

@smnandre it still do not fix the original issue 🤔

[smnandre]

Can you create a small reproducer, and show what you expected vs what happens?

But when you use the updateFromParent on a LiveProp and change its value from a parent, the component has to and will re-render entirely.

[akyoscommunication]

Hello, I also have the same problem,

I also have the same problem. After some research, I noticed that when using a LiveProp assigned to a form that is instantiated with ComponentWithFormTrait, the variable name must not be the same as the form name.

example:

    #[LiveProp(writable: true, updateFromParent: true, onUpdated: 'onUpdatedComponent')]
    public Component $component ;

    protected function instantiateForm() : FormInterface
    {
        return $this->createForm(ComponentType::class, $this->component) ;
    }

error :

An exception was thrown when rendering a model ("The field name ‘component’ cannot be used by multiple LiveProp properties in a component. Currently, “component” and “formValues” are both trying to use it in “xxx”. Try adding LiveProp(fieldName=“somethingElse”) for the “component” property to avoid this.").

Consequence:

If we change our variable like this

    #[LiveProp(writable : true, updateFromParent : true, onUpdated : 'onUpdatedComponent')]]
    public Component $c ;

    protected function instantiateForm() : FormInterface
    {
        return $this->createForm(ComponentType::class, $this->c) ;
    }

The onUpdated function cannot be triggered because, on line 664 of ux-live-component/src/LiveComponentHydrator.php, the $frontendName variable is equal to “c”. However, what we want is to have “component”, since on line 673, we check whether we have “c” in $dehydratedUpdatedProps. But the problem is that in this last variable, the Live Component only updates the “component” variable, since it's the form variable and not the variable name passed to LiveProps.

I hope I've made myself clear :D
Thanks in advance

[akyoscommunication]

In my case, the modified values are as follows:

Symfony\UX\LiveComponent\Util\DehydratedProps {#671 ▼
  -propValues: array:2 [▼
    “component.data.0.value” => ”qzdqzdq”
    “validatedFields” => array:1 [▶]
  ]
}

My Component object contains an array of Data in the $data property. I can have 0 or x Data object in the array. And I'd like to trigger onUpdated when I modify any Data inside.

[smnandre]

Please can you update another issue, as this is very different to the original one as i see it.. ?