MultiSelect in Form throws JS error when using jQuery 3.6.0

[aleksandarevangelatov]

Bug report

When a Telerik UI for ASP.NET Core MultiSelect is used in a Form, a JS error is thrown:

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #
    at Function.se.error (jquery.min.js:2)
    at se.tokenize (jquery.min.js:2)
    at se.select (jquery.min.js:2)
    at Function.se [as find] (jquery.min.js:2)
    at S.fn.init.find (jquery.min.js:2)
    at new S.fn.init (jquery.min.js:2)
    at S (jquery.min.js:2)
    at Object.data ((index):24)
    at init.setup (kendo.all.js:6596)
    at init.read (kendo.all.js:6574)

The issue occurs when using jQuery 3.6.0, but is absent with jQuery v 1.12.4

Reproduction of the problem

@(Html.Kendo().Form<FormViewModel>()
        .Name("exampleForm")
        .HtmlAttributes(new { action = "Items", method = "POST" })
        .Validatable(v =>
        {
            v.ValidateOnBlur(true);
            v.ValidationSummary(vs => vs.Enable(true));
        })
        .Items(items =>
        {
               items.Add()
                        .Field(f => f.MultiSelect)
                        .Label(l => l.Text("MultiSelect:"))
                        .Editor(e =>
                        {
                            e.MultiSelect()
                                .HtmlAttributes(new { })
                                .Placeholder("Select...")
                                .DataTextField("ProductName")
                                .DataValueField("ProductID")
                                .HtmlAttributes(new { style = "width:100%" })
                                .Height(520)
                                .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("Items_GetProducts", "Form");
                                    })
                                    .ServerFiltering(true);
                                });
                        });
             })
    )

    public class FormViewModel
    {
        public List<ProductViewModel> MultiSelect { get; set; }
    }

Runnable sample available in ticket 1540812

Expected/desired behavior

JavaScript error should not be thrown.

Environment

• Kendo UI version: 2021.3.914
• jQuery version: 3.6.0
• Browser: [all]

[eyupyusein]

The source of the problem is related to the .ServerFiltering(true) property while the MultiSelect is a part of a Form component like .Editor(e => { e.MultiSelect()...:

In this case the MultiSelects renders the following handler: "data":function() { return kendo.ui.MultiSelect.requestData(jQuery("#")); }

This part jQuery("#") is a valid selector in jQuery 1.12, but not in jQuery 3.6, hence the error: https://www.kevinleary.net/jquery-syntax-error-unrecognized-expression/

[eyupyusein]

Here is a new solution for this bug: https://github.com/telerik/kendo/pull/16378

As explained in my previous comment, when the MultiSelect is defined as the Editor Item of a Form component, setting its .ServerFiltering(true) generates an empty jQuery selector.

I fixed that by eliminating the jQuery 3.6 script error, but as Georgi mentioned, this does not resolve the underlying issue and this configuration does not even work with jQuery 1.12.

It turns out that the user can workaround that by setting the .Name() property explicitly:

        items.Add()
                 .Field(f => f.MultiSelect)
                 .Label(l => l.Text("MultiSelect:"))
                 .Editor(e =>
                 {
                     e.MultiSelect()
                         .Name("MultiSelect")

However, when the MultiSelect is defined as an Editor of a Form Item, I think this should automatically imply that the component is responsible for the given Field and it should acquire the Field as its Name. Similar to the MultiSelectFor instance. And the new fix does exactly that.

Attached sample app for testing: KendoMultiSelectBugJQueryCore.zip