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…")
);
});
})
)