ListItem isSelectable toggle click issue

[sureshjoshi]

I noticed a problem with the toggle handler in the ListItem - right now, if you want to click the ListItem and have it do something, while still allowing the item to be selectable (without the ListItem click handler running too) - I don't think it's possible to do that.

I think the ListItem's isSelectable toggle handler should have some modifier on it (not sure which). I've tried @click.self and @click.stop and both of those seem to work - but I'm not super familiar with the modifiers.

Here is some code that I've implemented which works (item is selectable when clicking explicitly on the checkbox, clicking the main item navigates, and clicking an icon does something else).

<ou-list>
    <ou-list-item 
        isSelectable 
        v-for="(p, index) in sortedItems" 
        :key="p.id" 
        :primary-text="p.text" 
        :secondary-text="p.date | formatDate" 
        v-model="checked[index]" 
        @click.native="navigateTo(index)">
        <ou-list-actions>
            <ou-list-action-item icon="Pinned" 
                @click.native.stop="pinItem(index)" />
            <ou-list-action-item icon="Delete" />
                @click.native.stop="deleteItem(index)" />
        </ou-list-actions>
    </ou-list-item>
</ou-list>

And in ListItem.vue

<div v-if='isSelectable' @click.stop='toggle' class='ms-ListItem-selectionTarget'></div>

[aidewoode]

That's because the list_item component doesn't implement click event on it. So you have to use native modifier to add native event on the component. And when you click selectionTarget element, the event popup, so the click event on the list_item component will trigger. And you can use stop or self modifier to restrict the event.

I think it's an issue, I will take some time to fix this. Thanks for your comment.