fx-items errors when additional textnodes are present for label

[JoernT]

Example:
/demo/fx-control.html

<fx-control ref="selected" update-event="input">
                        <fx-items ref="instance('list')?*" class="widget">
                            <template>
                                  <span class="fx-checkbox">
                                    <input id="check" name="option" type="checkbox" value="{value}"/>
                         -->           <label>foo {name}</label>
                                  </span>
                            </template>
                        </fx-items>
                    </fx-control>

The additional 'foo' textnode will cause an error when evaluating the expression. Also lets the code run into a syntax error and throws browser out-of-state - need to completely reload in a private window to make Chrome behave again.

[coloneltravis]

Hi,
Could this also be the cause of an issue I’m having with radio button controls when placed in groups on the same page?

I’m trying to implement a multiple choice questionnaire form with single selection choice questions. I’m not able to put a variable in the name attribute if the input tag in order to provide a unique name for a group of controls.

[JoernT]

Hi Jake, could you provide an example page that shows your problem? Thanks Jake Bourne ***@***.***> schrieb am Sa., 14. Sept. 2024, 10:03:

…

Hi, Could this also be the cause of an issue I’m having with radio button controls when placed in groups on the same page? I’m trying to implement a multiple choice questionnaire form with single selection choice questions. I’m not able to put a variable in the name attribute if the input tag in order to provide a unique name for a group of controls. — Reply to this email directly, view it on GitHub <#246 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADWFW5S6IYAGTM7ZSX7SPLZWPUVFAVCNFSM6AAAAABDNJAMZGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNJQHEYDENBWGA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[coloneltravis]

Hi Joern,

Absolutely - here is the page which show the problem with radio button groups.
I have replaced the 'data' instance with some example inline data.

As the fx-control is being shown within a fx-repeat, I am trying to set the @name attribute of the input[type='radio'] to something like "q{$qno}" so it will be be unique across iterations of each question.

Thanks,
Jake.

    <fx-fore>
        <fx-model>
            <fx-instance>
                <data>
                    <answers>
                        <answer qno="1"></answer>
                        <answer qno="2"></answer>
                        <answer qno="3"></answer>
                        <answer qno="4"></answer>
                        <answer qno="5"></answer>
                    </answers>
                </data>
            </fx-instance>

            <fx-instance id="quiz-data">
                <quiz id="quiz-1">
                    <questions>
                        <question qno="1">
                            <text>Question 1.)</text>
                            <options>
                                <item id="A">Option A</item>
                                <item id="B">Option B</item>
                                <item id="C">Option C</item>
                                <item id="D">Option D</item>
                            </options>
                            <answer>B</answer>
                        </question>
                        <question qno="2">
                            <text>Question 2.)</text>
                            <options>
                                <item id="A">Option A</item>
                                <item id="B">Option B</item>
                                <item id="C">Option C</item>
                                <item id="D">Option D</item>
                            </options>
                            <answer>B</answer>
                        </question>
                      </questions>
                     </quiz>
                </fx-instance>

            <fx-instance id="response">
                <data></data>
            </fx-instance>

            <fx-submission id="quiz_submission" url="#echo" method="post" replace="instance" instance="response">
            </fx-submission>
        </fx-model>

        <h1>Quiz</h1>
        <fx-repeat ref="//answer">
            <template>

                <fx-var name="qno" value="@qno"></fx-var>
                <fx-var name="qtext" value="instance('quiz-data')//question[@qno=$qno]//text"></fx-var>
                <h2>Question {$qno}</h2>

                <fx-control ref="." update-event="change">
                    <label>{$qtext}</label>
                    <div>
                        <fx-items ref="instance('quiz-data')//question[@qno=$qno]//item" class="widget">
                            <template>
                                <span class="fx-radio">
                                    <input id="radio" name="option" type="radio" value="{@id}">
                                    <label>{.}</label>
                                </span>
                            </template>
                        </fx-items>
                    </div>
                </fx-control>
            </template>
        </fx-repeat>

        <fx-trigger>
            <button>Send</button>
            <fx-send submission="quiz_submission"></fx-send>
        </fx-trigger>
    </fx-fore>

[JoernT]

@coloneltravis investigated a bit on it - surprisingly leaving the @name away completely gives better results. At least now the value is being set correctly for the respective answer. However this reveals another issue - you need to click at least twice to select a radio. This has to do with repeat index setting i guess - the index should be set immetiately.

However the way you tried should actually work but isn't. We'll dive a bit deeper tomorrow to fix this.

[coloneltravis]

@JoernT yes removing @name allows each radio button to be toggled as though they were checkboxes in a multiple-select list. However, typical radio list behaviour should be single-select.

Thank you for your time looking at this issue and hope it helps the project.

[DrRataplan]

Hey,

We looked into this, there are multiple issues going on:

• A click in a repeat requires updates: the index function might be used somewhere, so template expressions (and all XPath for that matter) is invalidated and should be reran.
• This causes a rerender of the fx-items, even of the inputs. None of the existing items seem to be reused. This can be improved.
• The inputs rerender, but the template expressions in it are not correctly updated. This can be fixed in Fore: just do the same as in a repeat: after the refresh is done, scan for new template expressions
• These inputs do not have a name set yet: it is still in a template: the name attribute is still {$qno} when the 'checked' is set. Which causes all other radiobuttons with the same name to be cleared. Since they all have the same name, all is cleared.
• the name cannot directly be updated because the input is not in the DOM yet.

Even with the template expressions updated after a refresh and setting checked in a timeout (after the name attribute is up to date) the main issue is the full refresh when a repeat is clicked.

I'm going to try to minimize that update: maybe make a property on all Fore elements of which XPaths they use. For a click in a repeat we know we can ignore all refreshing of all Fore elements that do nothing with the index function. This is a great performance improvement and prevents these kinds of bugs.

Thanks so much for bringing this up!