Kendo UI Form MultiSelect Rendering Duplicate Selections

[Christopher]

I'm encountering an issue with the Kendo UI Form when using a MultiSelect widget. When I render a form that includes a single MultiSelect field bound to a value, the widget inexplicably displays two chips for that value.

Key Observations:

• This occurs with both single and multiple selections.

• The issue does not occur when the MultiSelect is used outside the context of a Kendo Form.

• I'm fairly certain this is related to how the form is configured or how the binding is set up.

• I've reduced my code to a minimal test case to replicate the issue.

• See attached screenshots for reference.

Question:

Has anyone else encountered this behavior when using a MultiSelect within a Kendo UI Form? Any tips on what might be causing the duplicate value chips?

Thank you in advance! :)

 public class TestViewModel
 {
     public List<string> SelectedItems { get; set; } = new List<string>();
     public List<string> AvailableItems { get; set; } = new List<string>();
 }

public class TestController : Controller
{
    public ActionResult Index()
    {
        var model = new TestViewModel
        {
            AvailableItems = ["Option A", "Option B", "Option C"],
            SelectedItems  = []
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(TestViewModel model)
    {
        model.AvailableItems = ["Option A", "Option B", "Option C"];
        return View(model);
    }
}

@(Html.Kendo().Form<TestViewModel>()
    .Name("testForm")
    .HtmlAttributes(new { method = "post", id = "testForm" })
    .Items(items =>
    {
        items.AddGroup()
             .Label("Demo")
             .Items(g =>
             {
                 g.Add().Field(m => m.SelectedItems)
                      .Label("Pick Items")
                      .Editor(e => e.MultiSelect()
                          .BindTo(Model.AvailableItems)
                          .Placeholder("Select…")
                      );
             });
    })
)

[Ivaylo]

Hello Christopher,

Thank you for the details provided.

I created a sample application where the MultiSelect is working as intended. The application is attached to this reply. Please let me know if this is the desired result. If not, share more information or reproduce the issue in the attached project. This way, we could debug the code on our end and provide a more accurate and precise solution.

I hope this project was helpful.

Regards,
Ivaylo
Progress Telerik

[Christopher]

Hello Ivaylo! Thank you for taking a look at this. The sample you provided looks exactly like the one I provided in the code, but yours actually seems to be working properly. I'm currently trying to figure out what would be different between what you sent and my project environment. 

I will update if I am able to figure it out, but nothing is obviously different.

[Christopher]

Hello Ivaylo, I was not able to duplicate the issue in your environment. However, I used the Visual Studio wizzard to make a fresh project and added in the code and still see the same issue. 

Can you try out this one and see if you are able to see the same issue?

 

[Ivaylo]

Hi Christopher

I observed that you opened a support ticket on the same matter.

• https://www.telerik.com/account/support-center/view-ticket/1687710 

I suggest that we continue our technical conversation there.

Best Regards,

Ivaylo