Form Repeat - Radio Group radio is not selected

Wappler General Bugs
1

Wappler 6.8.0 | NodeJS | Docker

Looks like my quest with radio button group continues Radio selection bug

Description: I have a form, inside this form there is a form repeat which holds Radio Group with several values. Radio Group set to hold value received from Server Connect Action.
Issue: Radio Group value holds value for each repeat radio group, but visually selected only last repeat group.

Bug itself:

image
image660×1171 46.6 KB

Data that is received from ServerConnect:

image
image801×1264 55.2 KB

Page code:

<dmx-serverconnect id="serverconnect1" url="/api/getUsersCars"></dmx-serverconnect>
<div class="container">
    <div class="row">
        <div class="col">
            <form id="formUsersCars">

                <div is="dmx-form-repeat" id="formRepeat" dmx-bind:items="serverconnect1.data.query">
                    <div class="form-group mb-3" id="input1_group" is="dmx-radio-group" dmx-bind:value="selectedCarID">
                        <legend class="col-sm-2 col-form-label">{{first_name}}</legend>
                        <legend class="col-sm-2 col-form-label">Radio group value: {{value}}</legend>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="1" id="input1_1" name="input1">
                            <label class="form-check-label" for="input1_1">Hombre Space</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="2" id="input1_2" name="input1">
                            <label class="form-check-label" for="input1_2">Terraza</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="3" id="input1_3" name="input1">
                            <label class="form-check-label" for="input1_3">Miata MX-5</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="4" id="input1_4" name="input2">
                            <label class="form-check-label" for="input1_4">Escort</label>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Also tried to add {{index}} for names and id - didn't helped:

<dmx-serverconnect id="serverconnect1" url="/api/getUsersCars"></dmx-serverconnect>
<div class="container">
    <div class="row">
        <div class="col">
            <form id="formUsersCars">

                <div is="dmx-form-repeat" id="formRepeat" dmx-bind:items="serverconnect1.data.query">
                    <div class="form-group mb-3" id="input1_group" is="dmx-radio-group" dmx-bind:value="selectedCarID" dmx-bind:id="input1_group{{$index}}">
                        <legend class="col-sm-2 col-form-label">{{first_name}}</legend>
                        <legend class="col-sm-2 col-form-label">Radio group value: {{value}}</legend>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="1" id="input1_1" name="input1" dmx-bind:id="input1_1{{$index}}" dmx-bind:name="input1_group{{$index}}">
                            <label class="form-check-label" for="input1_1">Hombre Space</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="2" id="input1_2" name="input1" dmx-bind:id="input1_1{{$index}}" dmx-bind:name="input1_group{{$index}}">
                            <label class="form-check-label" for="input1_2">Terraza</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="3" id="input1_3" name="input1" dmx-bind:id="input1_1{{$index}}" dmx-bind:name="input1_group{{$index}}">
                            <label class="form-check-label" for="input1_3">Miata MX-5</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="4" id="input1_4" name="input1" dmx-bind:id="input1_1{{$index}}" dmx-bind:name="input1_group{{$index}}">
                            <label class="form-check-label" for="input1_4">Escort</label>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
3

@patrick May we ask to get your attention on this?

4

The dynamic names are being generated by the form repeat, so you don't have to add them yourself.

Dynamic id only changes the id in the DOM and not the id/name of the component. You probably also want to set the for attribute on the label with the same dynamic binding dmx-bind:for="input1_1{{$index}}". You also generate the same id for each input, it should be unique, so the second would be dmx-bind:id="input1_2{{$index}}" etc.

Is it only the initial value that doesn't select the correct input or do you also have problems with the values that is being submitted by the form?

1 Like
5

It doesn't select the correct input, indeed. Or I would say - it's selects/sets value only for the last radio, no matter how many radio buttons I have.
All good with on form submit scenario:

image
image708×319 5.41 KB

6

@patrick if there is a problem to catch/replicate the issue - I can send you a project archive. It is using Wappler Sample data, so nothing special will be needed.

7

There is a racing condition, the formRepeat adds an extra binding to the inputs for the dynamic name, but it is not directly resolved. The radio group seems to be setting the value while it still has the static name which is the same for all the inputs.

I've added some extra delay to the initial setting of the value in the radio groups, please check if does help.

dmxAppConnect.js.zip (119.7 KB)

1 Like
8

Worked like a charm! Thank you!

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.