V7b13 - Input fields in formRepeat not working when a Server Connect is nested in the formRepeat

[guptast]

Hello.

Today I started migrating one of the remaining last 2 projects from v6.8 to v7b13. During my testing, I have come across an issue in v7b13, which is working correctly in v6.8. The setup is as below.

I have a form repeat to allow any number of order lines. Each new row allows users to select a Product (from autocomplete input) and fill the quantities, and price etc. As the input rows are within a form repeat, I have a nested Server Connect that fetches and loads the product information for each row in the array.

This setup is working correctly in v6.8 with as many rows as required. But when I add a new row in v7b13, the page freezes and gives a browser prompt to exit the page or wait.

I have narrowed down the issue to nested Server Connect in the form repeat. If I remove the SC, the inputs work as expected. But the SC is required to record and save each row with separate product codes. Here's the simplified version of this code. The nested SC in the code is called sc_workorder_form_product_selected.

I have also included a screenshot of the browser prompt below that appears 10-15 seconds after I click on the Add Row Button in the Order Lines section.

Any help to resolve this issue is greatly appreciated.

<div is="dmx-form-repeat" id="formRepeatProduct" dmx-bind:items="dd_workorder_overview.data.lines">
    <dmx-serverconnect id="sc_workorder_form_product_selected" url="/api/Workorders/workorder_form_product_selected" dmx-bind:noload="inp_product_id.value==''||inp_product_id.value==0">
    </dmx-serverconnect>
          <div class="d-flex flex-row mb-2 align-items-start">
                <div class="col-1">
                    <div class="input-group">
                           <input type="text" is="dmx-autocomplete" class="form-control form-control-sm" id="inp_product_id" name="product_id" aria-describedby="inp_product_id_help" placeholder="Product *" required="" dmx-bind:data="sc_workorder_form_products.data.q_list_products" optiontext="product_code.toString()" optionvalue="product_id" data-msg-required="Required" dmx-bind:value="product_id!=null?product_id:''" dmx-on:updated="run({condition:{outputType:'boolean',if:`value!=\'\'||value!=0`,then:{steps:{run:{outputType:'text',action:`sc_workorder_form_product_selected.load({product_id: value})`}}}}})">
                      </div>
                </div>
         </div>
</div>
<div class="col d-flex flex-row my-2">
     <button id="btn4" class="btn btn-sm p-1 btn-outline-primary" dmx-on:click="run([{run:{outputType:'text',action:`formRepeatProduct.add()`}},{run:{outputType:'text',action:`formRepeatProduct.product_code.focus()`}}])">
     <i class="fa-solid fa-circle-plus p-1"></i></button>
</div>

[patrick]

Do you know which App Connect files have been updated between the working version and the problem version?

[guptast]

Hi Patrick, this project was upgraded from v6.8 to v7b13, without any intermediary upgrade. I can see about 40-50 dmx App Connect file updates in the GIT Manager.

I can take a screenshot of the list if that will assist in troubleshooting.

[guptast]

Screenshots of the App Connect files that were updated from v6.8 to v7b13.

[patrick]

Currently I'm not sur if the problem is with the Server Connect component, the Form Repeat component or the Autocomplete component. Could you try to temporary remove the autocomplete (replace it with a simple input) and check if it still fails.

Do you get any errors in devtools console and do you see any server requests made by the server connect in the network tab?

[guptast]

Hi Patrick, as suggested, I replaced the autocomplete with a simple input element, and it is still causing the page to freeze.

To narrow it down further, the issue seems to stem from executing/loading the nested SC when dmx-bind:updated event is triggered in the input element. In the dev console I can see that although the execution of SC is triggered correctly; it doesn't return any response and causes the browser page to freeze.

The page freezes on the trigger of dmx-bind:updated event for both simple and autocomplete inputs. I have included the code for both input types. The nested SC is set to noload="true" and is loaded only on the trigger of input updated event.

simple input code:

<div is="dmx-form-repeat" id="formRepeatProduct" dmx-bind:items="dd_workorder_overview.data.lines">
    <dmx-serverconnect id="sc_workorder_form_product_selected" url="/api/Workorders/workorder_form_product_selected" noload="true">
    </dmx-serverconnect>
    <input type="text" dmx-bind:value="product_id!=null?product_id:''" dmx-on:updated.debounce:1000="run({condition:{outputType:'boolean',if:`value!=\'\'||value!=0`,then:{steps:{run:{outputType:'text',action:`sc_workorder_form_product_selected.load({product_id: value})`}}}}})">
</div>

autocomplete input code:

<div is="dmx-form-repeat" id="formRepeatProduct" dmx-bind:items="dd_workorder_overview.data.lines">
    <dmx-serverconnect id="sc_workorder_form_product_selected" url="/api/Workorders/workorder_form_product_selected" noload="true">
    </dmx-serverconnect>
    <input type="text" is="dmx-autocomplete" class="form-control form-control-sm" id="inp_product_id" name="product_id" aria-describedby="inp_product_id_help" placeholder="Product *" required="" dmx-bind:data="sc_workorder_form_products.data.q_list_products" optiontext="product_code.toString()" optionvalue="product_id" data-msg-required="Required" dmx-bind:value="product_id!=null?product_id:''" dmx-on:updated="run({condition:{outputType:'boolean',if:`value!=\'\'||value!=0`,then:{steps:{run:{outputType:'text',action:`sc_workorder_form_product_selected.load({product_id: value})`}}}}})">
</div>

[guptast]

Hi Patrick, please let me know if I need me to run further testing to identify any likely issue with this setup. This particular app uses the nested SC extensively in various forms, and I can't think of any other methods to achieve the same workflows.

[patrick]

Could you replicate the problem in a very simple test page which you could share. I tried to replicate but I'm not able to get it to crash and it works fine for me in a simple test page.

[guptast]

Hi @patrick, I have published the app to a staging site. I will send a DM with the login details and information on the element that's failing. This will provide a complete view of the html and DOM structure on the page.