On Autocomplete update set focus to other form input

[famousmag]

Hey,

I have a form containing an autocomplete (Product_id):

<input class="form-control" id="product_id" name="product_id" is="dmx-autocomplete" dmx-bind:data="srvc_productSearchList.data.qr_productSearchList" optiontext="prd_Name" optionvalue="prd_id" dmx-on:updated="data_detailProductLine.select(value.toNumber());category.setValue(data_detailProductLine.data.prd_Cat_id);notifies1.success(value);inp_quantity.focus()" placeholder="Type here Product name..." required="true" autofocus="true">

And an input field (Quantity):
<input type="number" class="form-control text-center" id="inp_quantity" name="inp_quantity" aria-describedby="input1_help" placeholder="Quantity" value="1">

I need (if it is possible) when the autocomplete input updates/changes (select a value) to set the focus to the other input (Quantity)…

I have tried every dynamic event but autocomplete even if I select a value it doesn’t loose the focus.

But if I select a value in the autocomplete and then clear it and set another value it works…

Here is a video for this second change:

Order Addition - Google Chrome 2023-08-19 09-38-54

Probably I haven’t understood how focus() or autocomplete works.

Is this possible to get this to work or I should just forget about it?

[famousmag]

I don’t know why or if this is not possible but I solved it otherwise…

In my form after the autocomplete input, I have a Category input (read-only) that is updated when the autocomplete is updated…

And then onUpdate of the Category input I set the focus to Quantity input.

<input id="category" name="text1" class="form-control bg-secondary bg-opacity-25 text-danger border" dmx-on:updated="srvc_getVar_OptionList.load({cat_id: value.toNumber()});inp_quantity.focus()" type="text" is="dmx-autocomplete" readonly="true" dmx-bind:data="srvc_categoriesList.data.query" optiontext="cat_Name" optionvalue="cat_id" optionsearch="cat_id">

I worked on this just like I worked for loading a serverconnect (srvc_getVar_OptionList) passing an input parameter (category_id) on the autocomplete Update event…
The serverconnect was loaded BUT without the input parameter (although the input had a valid value), it was just ignored while I assigning it within the autocomplete onUpdate event…
So, I pass the value to Category input and on Category onUpdate event I call the serverconnect passign the input parameter and then set the focus to Quantity input.

In my case is not the ideal workaround BUT is acceptable and works fine.

If anybody has an idea or suggestion about this autocomplete onUpdate/onChange event behavior please drop it here…

[Apple]

Convert dmx-on:updated to a flow:

Delay execution of focus by 10 ms and use the Run step:

(screenshot above has “Run Javascript” step, hence the icon is different from “Run” step)

[famousmag]

Thanks @Apple for your solution!

I searched this and found your post here that made me think in a different way:

Dynamic Events and similar don't work on fields with Wappler's autocomplete

Wappler 5.2.3 This doesn’t work on fields with Wappler’s autocomplete: [Set Value] This is because Wappler’s autocomplete makes the original input hidden and creates a new one for autocomplete functionality, so Set Value affects the hidden input but not the shown one Dynamic Events also don’t work, such as dmx-on:click

But the delay solution didn’t come in my mind…

In my case I will leave this way but it is very nice to have the delay solution!

Thanks again