ux icon indicating copy to clipboard operation
ux copied to clipboard

[LiveComponent] Form re-render only possible with live-id on component instantiation

Open davidhoelzel opened this issue 1 year ago • 0 comments

The form inside a live-component is not re-rendered although formData changes.

I'm not sure if this is intended, thereforce I have created a reproducer-repo: https://github.com/davidhoelzel/ux-reproducer

ProviderComponent is providing data for the form of FormComponent. When ProviderComponent provides new data, the FormComponent is updated (due to "updateFromParent: true" on its LiveProp). But it seems that only those parts of the template are updated where the liveProp is explicitly used. The LiveProp of the FormComponent is updated as expected and all parts of the template where this prop is used are re-rendered. Also, the instantiateForm method is called again and the form gets re-recreated with the new formData. But the form is not re-rendered in the template.

What I've tried:

  • add data-live-id on form-tag {{ form_start(form, {attr: { 'data-live-id': initialFormData}}) }} -> no change, form is not re-rendered

What is working:

  • render the form-field with explicit value: {{ form_row(form.text, { value: initialFormData }) }} But this becomes clumsy when there is more than one field involved ;-)
  • instantiate the component with a live-id: {{ component('FormComponent', {initialFormData: this.randomString, 'data-live-id': this.randomString}) }} But this just leads to totally resetting the component and re-render it completely
  • use an event that is emitted from ProviderComponent and listen in FormCompoent for that event and call resetForm But this requires another ajax-call and makes the system slower than it has to be (additionally the LiveProp with "updateFromParent: true" becomes obsolete)

davidhoelzel avatar Jan 17 '24 14:01 davidhoelzel