OnsenUI 2.0 - Tap on tappable ons-list-item can't check inner radio input

honglio

<ons-list-item tappable>
   <ons-input type="radio"></ons-input>
</ons-list-item>

Because of tappable attribute, tap on anywhere of ons-list-item should check the inner input[type='radio'] of ons-input. When I switch to CSS radio-button, the inner input[type='radio'] doesn’t checked unless tap on Label. The code is in below.

<ons-list-item tappable>
    <label class="radio-button radio-button--list-item">
        <input type="radio" class="radio-button__input" name="a" value="Male">
        <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
        Male
    </label>
</ons-list-item>

Fran Diox

@honglio Hello!

tappable attribute only adds styles. It does not modify the behavior of the element in case it contains inputs, and we don’t plan to do it.

However, it’s quite easy to make what you want to do without using those CSS classes. Have a look at this article and read the section “Improved list items” and “Extended ons-input”.

honglio

@Fran-Diox Does ons-input support other attribute than ID which set to its inner input?

Fran Diox

@honglio It maps all the important attributes to the inner input so you can use ons-input as if it was a normal input. For example, <ons-input type="checkbox" checked></ons-input> will check the checkbox.

honglio

@Fran-Diox I try to add custom attribute in ons-input, like…
<ons-input type="radio" v-model="foobar"></ons-input>
But v-model doesn’t map to inner input. :(

Fran Diox

@honglio Well, I said “important attributes”. With that I meant normal attributes for <input>, not custom ones.