[Bug] Certain click events not triggering in MenuItems

[Jeff]

Hi,

I believe my experience below is a bug, in which case I can report it elsewhere if this is not the proper channel.

I'm currently creating a Menu with custom text in an absolutely-positioned context menu. Each item has a checkbox and a label. Everything works fine except clicking on the label does not alter the checkbox (no click/change event is fired on the checkbox). What's even weirder, is that while holding the mouse button down on the label, the checkbox changes to its active state, so the link between the two items is clearly made.

I believe this bug stems from the openOnClick and closeOnClick configurations, because with a simple test case of one item, the bug can only be reproduced by passing values to one or both of these parameters in the configuration object. Adding a child to this test case will always produce the bug (presumably because the configurations are set to their defaults internally).

Below is my server wrapper code and a client-side test case. Both exhibit the bug, although the subitem from the latter can be removed to result in correct functionality.

@(Html.Kendo().Menu()
            .Name("s-mapMenu")
            .Orientation(MenuOrientation.Vertical)
            .Direction(MenuDirection.Right)
            .OpenOnClick(false)
            .CloseOnClick(false)
            .BindTo((IEnumerable<MyModels.Event>)ViewBag.EventList, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<MenuItem> mappings) => mappings
                .For<MyModels.Event>(binding => binding
                    .ItemDataBound((item, e) =>
                    {
                        item.Text = "<input type=\"checkbox\" checked class=\"s-checkbox\" id=\"toggle-" + e.EventID + "\" /><label for=\"toggle-" + e.EventID + "\">" + e.Name + "</label>";
                        item.Encoded = false; // Need this in order to render item.Text as HTML
                    })
                    .Children(e => e.EventObjects.Where(obj => obj.ArchivedDate == null).OrderByDescending(obj => obj.LastUpdated))
                )
                .For<MyModels.EventObject>(binding => binding
                    .ItemDataBound((item, o) =>
                    {
                        item.Text = "<input type=\"checkbox\" checked class=\"s-checkbox\" id=\"toggle-" + o.EventObjectID + "\" /><label for=\"toggle-" + o.EventObjectID + "\">" + o.Name + "</label>";
                        item.Encoded = false; // Need this in order to render item.Text as HTML
                    })
                    .Children(o => o.EventObjects.Where(obj => obj.ArchivedDate == null).OrderByDescending(obj => obj.LastUpdated))
                )
            )
        )

<ul id="myMenu">
    <li>
        <input id="foo" type="checkbox" /><label for="foo">hello</label>
        <!-- Removing the interior list below removes the bug -->
        <ul>
            <li>child</li>
        </ul>
    </li>
</ul>
<script>
    $("#myMenu").kendoMenu();
</script>

If you know of any workarounds, I would greatly appreciate it, as right now I have to manually listen for click events on the label.

Thanks,
Jeff

[Dimo]

Hello Jeff,

The Kendo UI Menu prevents some default DOM events in order to prevent unexpected behavior. Indeed, in this case when clicking on the label, the default event should not be prevented. This issue has been fixed and changes will take effect in the next internal and official builds. I have updated your Telerik points for bringing the issue to our attention, thanks.

Regards,
Dimo
Telerik