AC2 Most Recent - Autocomplete Text Fields Not Defaulting to Dynamically Assigned Value

[umadmin]

Wappler Version : 6.0.2 AC Beta Extensions
Operating System : Mac M2
Server Model: Node.js
Database Type: MySQL (externally hosted)
Hosting Type: Docker/Digital Ocean

Expected behavior

In the stable AC channel (AC1) I have two autocomplete fields in a form. The two fields can be prepopulated with servconnect data and can be updated by the end user. The assignment of the value in a dmx-bind:value statement works in AC1.

Actual behavior

After updating to AC2 via the beta extension channel the values are not pre-populated with the data from the server connect.

Screen Recording 2023-12-06 at 3.11.38 PM

How to reproduce

To reproduce, update to AC2 beta extensions. The form fields are below. The issue only seems to impact the autocomplete fields. Other fields are prepopulated as expected. The code works in production with AC1.

<div class="row row-cols-md-2 row-cols-1 row-cols-sm-2" id="matchDetails">
            <div class="col">

                <div class="form-floating">

                    <input id="inputPlayer1" name="inputPlayer1readonly" type="text" class="form-control mb-3 ps-4 pe-4 form-control-lg" placeholder="Type Leader Name" is="dmx-autocomplete" dmx-bind:data="getRegistrantsAll.data.queryRegistrants" optiontext="campaignDisplayName" optionvalue="registrantId" required="" dmx-bind:disabled="sc_current_user.data.isAdmin!=1" dmx-bind:value="scGetMatchDetails.data.matchDetails.leaderId.default(scGetMyReg.data.queryMyRegistrantId.registrantId)">
                    <label for="inputPlayer1" class="col-form-label" dmx-text="(varCampaignId.value == 1 ? 'UM League Player' : 'Higher Seed')"></label>
                </div>
            </div>
            <div class="col">

                <div class="form-floating">
                    <input id="inputPlayer2" name="inputPlayer2readonly" type="text" class="form-control mb-3 form-control-lg" placeholder="Type Follower Name" is="dmx-autocomplete" dmx-bind:data="getRegistrantsAll.data.queryRegistrants.where(`registrantId`, inputPlayer1.value, '!=')" optiontext="campaignDisplayName" optionvalue="registrantId" dmx-bind:value="scGetMatchDetails.data.matchDetails.followerId" required="" dmx-bind:disabled="(scGetMatchDetails.data.matchDetails.status == 'In Progress' || scGetMatchDetails.data.matchDetails.status == 'Completed' || varCampaignId.value != 1)&amp;&amp;sc_current_user.data.isAdmin!=1">
                    <label for="inputPlayer2" class="col-form-label" dmx-text="(varCampaignId.value == 1 ? 'Opponent (type name)' : 'Lower Seed')"></label>
                </div>
            </div>

[brad]

I have experienced this with Autocomplete fields as well (even on stable extensions). However it was very intermittent and I could never nail down a cause. I changed all of my auto complete fields to tagify select fields and have had no problems with the same functionality.

[umadmin]

Thanks for the tip. If it can’t be resolved in AC2 I’ll definitely give tagify a try!

[umadmin]

Circling back on this (especially in response to the comment earlier that AC2 would be released in the next few weeks). I just tested with the most recent 6.1.2 and AC2 updates and am still seeing the behavior reported in the original post.

Edit: in retesting I noticed a new error when the “disabled” parameter is present in an Autocomplete in AC2. Perhaps this is helpful/related. (the error goes away when the disabled tag is removed)

TypeError: Cannot set properties of undefined (setting 'disabled')
    at n._disable (autocomplete.js:147:1)
    at n.init (formElement.js:65:1)
    at n.init (autocomplete.js:66:1)
    at n.constructor (BaseComponent.js:44:1)
    at n (api.js:5:1)
    at t.hasOwnProperty.t.constructor (api.js:47:1)
    at n [as constructor] (api.js:5:1)
    at t.hasOwnProperty.t.constructor (api.js:47:1)
    at new n (api.js:5:1)
    at n.$createChild (BaseComponent.js:135:1)
|constructor|@|BaseComponent.js:55|
|---|---|---|
|n|@|api.js:5|
|t.hasOwnProperty.t.constructor|@|api.js:47|
|n|@|api.js:5|
|t.hasOwnProperty.t.constructor|@|api.js:47|
|n|@|api.js:5|
|$createChild|@|BaseComponent.js:135|
|(anonymous)|@|BaseComponent.js:256|
|walk|@|dom.js:186|
|walk|@|dom.js:191|
|walk|@|dom.js:191|
|walk|@|dom.js:191|
|walk|@|dom.js:191|
|$parse|@|BaseComponent.js:226|
|render|@|BaseComponent.js:69|
|constructor|@|BaseComponent.js:46|
|n|@|api.js:5|
|t.hasOwnProperty.t.constructor|@|api.js:47|
|n|@|api.js:5|
|t.hasOwnProperty.t.constructor|@|api.js:47|
|n|@|api.js:5|
|$createChild|@|BaseComponent.js:135|
|(anonymous)|@|BaseComponent.js:256|
|walk|@|dom.js:186|
|walk|@|dom.js:191|
|walk|@|dom.js:191|
|$parse|@|BaseComponent.js:226|
|render|@|BaseComponent.js:69|
|constructor|@|BaseComponent.js:46|
|n|@|api.js:5|
|t.hasOwnProperty.t.constructor|@|api.js:47|
|n|@|api.js:5|
|$createChild|@|BaseComponent.js:135|
|(anonymous)|@|BaseComponent.js:256|
|walk|@|dom.js:186|
|walk|@|dom.js:191|
|walk|@|dom.js:191|
|$parse|@|BaseComponent.js:226|
|render|@|BaseComponent.js:69|
|constructor|@|BaseComponent.js:46|
|n|@|api.js:5|
|t.hasOwnProperty.t.constructor|@|api.js:47|
|n|@|api.js:5|
|(anonymous)|@|appConnect.js:48|
|Promise.then (async)|||
|(anonymous)|@|appConnect.js:33|
|document.readyState.document.addEventListener.once|@|api.js:22|

[scalaris]

A blank value or trxt field in the dataset can cause this in my experience

[umadmin]

Both the original issue and the error related to ‘default’ above are specific to AC2. The error doesn’t occur and the functionality works as intended (per the video in the OP) in AC1.

[Teodor]

Fixed in Wappler 6.1.3