Autocomplete component: setting the value with a dynamic event issue

I’m trying to achieve this:

1. User clicks on ‘edit’ button
2. Modal loads, autocomplete value is set by the edit button (example, id: 94)
3. Autocomplete triggers a server connect (dynamic event: ‘value updated’)

This logic breaks in step 2. The setting of the value by the edit button.

Here’s my set up:

1. The edit button

   

   image925×864 78.9 KB

2. The autocomplete:

<input data-form-type="other" id="autocomplete_product" class="form-control form-control-solid" name="product_id" is="dmx-autocomplete" dmx-bind:data="products_get_complete_list.data.query_products_complete_list" optiontext="name" optionvalue="id" dmx-on:updated="products_get_product_details.load({product_id: modal_product_edit.form_product_add_to_checkout.autocomplete_product.value, checkout_id: query.checkout_id})" noresultslabel="+ Maak nieuw product" dmx-on:noresults="modal_product_edit_create_product.show()" dmx-class:bg-success="modal_product_edit.form_product_add_to_checkout.autocomplete_product.value" dmx-class:bg-opacity-25="modal_product_edit.form_product_add_to_checkout.autocomplete_product.value">
                            value of autocomplete: {{modal_product_edit.form_product_add_to_checkout.autocomplete_product.value}}

And visually:

image951×895 93.4 KB

This is what happens:
Scenario A - load the page fresh, and click on an edit button:

1. I click on the edit button for the product ‘Nieuw test product’

   

   image1051×418 23.5 KB

2. It loads the modal and the autocomplete contains the correct product name: ‘nieuw test product’ and the correct id ‘94’

   

   image779×370 20.8 KB

3. I close the modal

4. I click on the edit button of ‘2e test product’

   

   image988×358 21 KB

5. The autocomplete shows the correct name, but the product id is still the old ‘94’. It should be ‘95’:
   

   

   image753×363 22.6 KB

Any ideas?