Bug? Multiselect does not respond when its label is clicked

[Ian]

I have the following code and when I click the Options label nothing happens. I would have expected the same effect as for clicking within the multi-select control itself (standard behaviour which your other widgets such as DropDownList observe). Is this a bug?  Thanks.

<label for="Options">Options</label>
 @(Html.Kendo().MultiSelect()
                  .Name("Options")
                  .Placeholder("Please select")
                  .HtmlAttributes(new { style = "width: 100%;" })
                  .BindTo(new List<string>() {
                      "Option 1",
                      "Option 2"
                  })
            )

[Georgi Krustev]

Hello Ian,

 
The described behavior is actually expected. The MultiSelect element is a complex widget, which renders a hidden select element, which holds the selected options and UI for selecting tags. Because the select element is not visible the label element will not be able to focus it. I can suggest you to possible ways to handle this scenario:

1. Put the widget inside the label element:

<label for="Options">Options
 @(Html.Kendo().MultiSelect()
                  .Name("Options")
                  .Placeholder("Please select")
                  .HtmlAttributes(new { style = "width: 100%;" })
                  .BindTo(new List<string>() {
                      "Option 1",
                      "Option 2"
                  })
            )
</label>

2. Handle click event of the label element:

<label for="Options">Options</label>
 @(Html.Kendo().MultiSelect()
                  .Name("Options")
                  .Placeholder("Please select")
                  .HtmlAttributes(new { style = "width: 100%;" })
                  .BindTo(new List<string>() {
                      "Option 1",
                      "Option 2"
                  })
            )
<script>
    $(function () {
        $("label").click(function() {
            var multiselect = $("#" + $(this).attr("for")).data("kendoMultiSelect");

            if (multiselect) {
                multiselect.focus();
            }
        })
    });
</script>

Regards,
Georgi Krustev
Telerik

[Ian]

Thanks for the workarounds Georgi. I need to use the second method but using focus() is not consistent with the standard behaviour of clicking the labels for the other controls. Clicking the other labels causes the dropdown to appear not just giving focus to the control. Can you suggest an alternative to focus() to achieve this? Thanks.

[Georgi Krustev]

Hello Ian,

 
You can check this jsFiddle demo, which shows how to focus different widgets when click label tag.

Regards,
Georgi Krustev
Telerik

[Ian]

But that jsfiddle demo has the same problem. Focus is given to the multiselect but the dropdown does not appear. This behaviour is inconsistent with the other controls. Can you tell me how to make the dropdown appear for the multiselect also (not just focus)? Thanks

[Georgi Krustev]

Hello Ian,

 
If you want to open the widget's popup on label click then you will need to use the widget open method. Check the updated jsFiddle demo.

Regards,
Georgi Krustev
Telerik

[Ian]

Great. That's made the behaviour consistent. Thanks.