[Autocomplete/LiveComponent] How to re-render autocomplete after updating value with LiveListener

[cyrille-osyla]

Hello, I just set up the same system as this demo: https://ux.symfony.com/demos/live-component/product-form This works very well for updating a classic select (EntityType) but not for a symfony UX autocomplete select type: https://ux.symfony.com/autocomplete In the live component doc, it is stipulated to put the object id: https://symfony.com/bundles/ux-live-component/current/index.html#dynamically-updating-the-form-in-a-liveaction live component form and listener:

#[AsLiveComponent]
class QuotationForm extends AbstractController
{
    use DefaultActionTrait;
    use LiveCollectionTrait;

    #[LiveProp(writable: true, fieldName: 'formData')]
    public Quotation $quotation;

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

    #[LiveListener('customer:created')]
    public function onCustomerCreated(#[LiveArg] Customer $customer): void
    {
        $this->formValues['customer'] = $customer->getId();
    }
    
    //...

it updates the select which is hidden but not on the autocomplete overlay. How can I refresh this from the listener? Did I miss something? Thank !

[Gerben321]

Same issue here! I've got an Extension that I made for an EntityType. In the buildView method I set the data and value for a dependent form field (also Symfony UX). In my element I see the selected attribute at the correct value, but the autocomplete overlay does not show it.

When autocomplete = false it works great in that regard.

[EOL-Fred]

I have the same problem, it looks very similar to issue #1500 , could be a duplicate ?

EDIT : my workaround is to add the data-skip-morph attribute to the EntityType or my custom Class for autocomplete fields.

[cyrille-osyla]

I have the same problem, it looks very similar to issue #1500 , could be a duplicate ?

EDIT : my workaround is to add the data-skip-morph attribute to the EntityType or my custom Class for autocomplete fields.

Hello, I checked and it already has the data-skip-morph attribute. I'm still having the same problem. The hidden select is correctly updated since the selected option is the right one. But in the overlay, it's not the correct value...

[EOL-Fred]

I have the same problem, it looks very similar to issue #1500 , could be a duplicate ? EDIT : my workaround is to add the data-skip-morph attribute to the EntityType or my custom Class for autocomplete fields.

Hello, I checked and it already has the data-skip-morph attribute. I'm still having the same problem. The hidden select is correctly updated since the selected option is the right one. But in the overlay, it's not the correct value...

I see you don't use the ComponentWithFormTrait, is it on purpose ?

[cyrille-osyla]

I have the same problem, it looks very similar to issue #1500 , could be a duplicate ? EDIT : my workaround is to add the data-skip-morph attribute to the EntityType or my custom Class for autocomplete fields.

Hello, I checked and it already has the data-skip-morph attribute. I'm still having the same problem. The hidden select is correctly updated since the selected option is the right one. But in the overlay, it's not the correct value...

I see you don't use the ComponentWithFormTrait, is it on purpose ?

Yes, that's normal because it's already in LiveCollectionTrait.

[cyrille-osyla]

@EOL-Fred Indeed I just retested by adding data-skip-morph but on a parent div and it works! So what is the purpose of the data-skip-morph on the autocompletefield ?

[EOL-Fred]

Indeed I just retested by adding data-skip-morph but on a parent div and it works! So what is the purpose of the data-skip-morph on the autocompletefield ?

According to the documentation :

Normally, when a component re-renders, the new HTML is "morphed" onto the existing elements on the page. In some rare cases, you may want to simply overwrite the existing inner HTML of an element with the new HTML instead of morphing it.

https://symfony.com/bundles/ux-live-component/current/index.html#overwrite-html-instead-of-morphing

[cyrille-osyla]

@EOL-Fred That's exactly what I saw. The data-skip-morph is indeed present on the autocomplete field but is not working properly. I added a data-skip-morph on a parent div and it works. I'm just trying to understand the purpose of the one on the field.

[cyrille-osyla]

Waiting Fix with this PR #1512