Input loses focus after array update

Wappler General
1

Setup: A series of inputs populated by an array element. When the input is changed, the array is updated with the new value.

The issue: The input loses focus when the array is updated.

Is it possible for the input to retain focus?

Screen Recording 2021-07-01 at 7.39.01 AM

The reason I am using the changed event, is because of a related issue.

The same series of inputs, but with on blur event for the update instead of on changed:

When clicking into a new input, the blur performs the update properly, but the destination input requires a second click in order to set focus.

Is it possible for the destination input to be focused?

Screen Recording 2021-07-01 at 7.39.56 AM

3

How does the html look like? Do you used a key on the repeater, that would prevent it from re-rendering all elements.

2 Likes
4 
<!-- Wappler include head-page="layouts/main" fontawesome_4="cdn" is="dmx-app" id="focus" appConnect="local" bootstrap5="local" -->
<dmx-serverconnect id="serverconnect1" url="api/get_items"></dmx-serverconnect>
<dmx-array id="arr1" dmx-bind:items="content.serverconnect1.data.items"></dmx-array>
<meta name="ac:route" content="/focus">
<div class="container">
    <h4>Focus test</h4>
    <div class="row">
        <div class="col-4" dmx-repeat:item_list="arr1.items">

            <input dmx-bind:id="input{{$index}}" id="text1" name="text1" type="text" class="form-control" dmx-on:blur="arr1.replaceAt($index,{title: value})" dmx-bind:value="$value.title">

        </div>
    </div>
</div>

I also tried w/o dynamic id’s. This shows the blur, and the only change for the first video is moving to on changed.

EDIT: Will try now with key

5

Thanks @patrick, I’ve switched to a repeat children rather than a dynamic repeat attribute, and it has fixed both in the sandbox test and my actual app.

<!-- Wappler include head-page="layouts/main" fontawesome_4="cdn" is="dmx-app" id="focus" appConnect="local" bootstrap5="local" -->
<dmx-serverconnect id="serverconnect1" url="api/get_items"></dmx-serverconnect>
<dmx-array id="arr1" dmx-bind:items="content.serverconnect1.data.items"></dmx-array>
<meta name="ac:route" content="/focus">
<div class="container">
    <h4>Focus test</h4>
    <div class="row">
        <div class="col-4">
            <div id="repeat1" is="dmx-repeat" dmx-bind:repeat="arr1.items" key="$index">
                <input dmx-bind:id="input{{$index}}" id="text1" name="text1" type="text" class="form-control" dmx-on:blur="arr1.replaceAt($index,{title: value})" dmx-bind:value="$value.title"></div>



        </div>
    </div>
</div>
7

That’s what I expected, the input was replaced each time causing the focus/blur problems.