XF 2.0 <xf:radiorow class attribute is not working

[CMTV]

In public templates class="..." attribute is not working for <xf:radiorow tag.

For example this code:

<xf:radiorow class="js-mathTypeSwitcher" name="math-type">
    <xf:option value="inline">{{ phrase('Math_inline') }}</xf:option>
    <xf:option value="block">{{ phrase('Math_block') }}</xf:option>
</xf:radiorow>

Produces this output:

<ul class="inputChoices">
    <li class="inputChoices-choice">
        <label class="iconic iconic--radio iconic--labelled">
            <input type="radio" name="math-type" value="inline"><i aria-hidden="true"></i>Inline
        </label>
    </li>
    <li class="inputChoices-choice">
        <label class="iconic iconic--radio iconic--labelled">
            <input type="radio" name="math-type" value="block"><i aria-hidden="true"></i>Block
        </label>
    </li>
</ul>

No sign of js-mathTypeSwitcher class.

 

[Chris D]

You'll likely need to use rowclass or listclass to specify where you want the class attribute to actually appear.

 

[CMTV]

@Chris D, well I just wanted to say that class is working fine for other xenForo tags. For example: <xf:selectrow tag:

This code:

<xf:selectrow class="myClass" name="math-type">
    <xf:option value="inline">{{ phrase('Math_inline') }}</xf:option>
    <xf:option value="block">{{ phrase('Math_block') }}</xf:option>
</xf:selectrow>

Produces this:

<select name="math-type" class="myClass input" id="_xfUid-1-1524049505">
    <option value="inline">Inline</option>
    <option value="block" selected="selected">Block</option>
</select>

So there is no problem in which place to put myClass. It just put it to the parent of an element. I expected the same behaviour from <xf:radiorow so it means putting myClass to <ul ... tag. But it simply does nothing and that is why I think this is kind of a bug.

Moreover, the id attribute works perfectly for both <xf:radiorow and <xf:selectrow. class is working only for <xf:selectrow

One more thing. About the source of this problem. This is how native xenForo JS files get selected option from <xf:selectrow:

this.$switcher = this.$target.find('.myClass');
/* **** */
this.$switcher.find(':selected').val();

But I have to use id instead of class to get selected option in radiorow because class is not working:

this.$switcher = this.$target.find('#myRadiorowID');
/* *** */
this.$switcher.find(':checked').val();

 

[Chris D]

Radio inputs and select inputs are very different. Selects are a single element, radio inputs are a collection of input elements. Similar to checkboxes. In fact, checkboxes work the same as radios in this case.

The reason it's like this is because there are so many different elements at play with radios/checkboxes, so what's the intention for the class attribute? Should it go on the row? Should it go on the list that surrounds the choices?

The id attribute will be applied automatically to the list element, whereas rowid will be applied to the formRow element. In retrospect, this should be rowid and listid to match up with the classes, but it's too late for that now.

Anyway, long story short, if what you're doing with the id attribute works now, you'd just need to use the listclass attribute to get the same effect.

 

[CMTV]

Oh I see now. I just did not know that listclass does what I needed. Thank you for explanations. I got your point.