I'm playing with Symfony UX, Twig Component and Live Component.
On the one hand, I set up the present example here : https://ux.symfony.com/live-component, it works well.
On another side, I have implemented this other example which is about dependent form fields : https://ux.symfony.com/live-component/demos/dependent-form-fields, it works well too.
What I would like to do is to mix these two examples : when I select a value in the first dropdown list, it updates the second dropdown list and the items (obviously, the data is consistent between the 2 components, unlike the 2 examples taken separately). It works... moderately :)
There are 2 "data-model" attributes :
one on the form :
<form name="search_filter_form" method="post" data-model="on(change)|*">one on the dropdown list :
<select id="search_filter_form_meal" name="search_filter_form[meal]" required="required" class="form-select" data-model="query">
With the data-model on the form only, the second dropdown list is updated but not the items.
With the data-model on the select field only, the items are updates but not the second dropdown.
It seems there is a conflict between these two data-model attributes and I don't know how to resolve it (this is completely new to me). In the official Symfony documentation, I saw things about hook in Javascript but I'm a bit lost : https://symfony.com/bundles/ux-live-component/current/index.html#model-updates-don-t-work-when-external-javascript-changes-a-field
Any help will be appreciated :)
Thanks !