I have two connected listboxes. First listbox has list of divs with unique dropdownlist in it.
I want have opportunity to select and change value in any of that dropdownlist and drag and drop one of this div with dropdownlist to other listbox.

I use demo from telerik as example https://demos.telerik.com/aspnet-mvc/listbox/templates.
Drag and Drop is working, i fill first listbox with elements and even fill all dropdownlists with elements. Thats all works fine.

But when i open any of this dropdownlist, it immedidatly closes, and i can’t select any value.

And i see, that all this dropdownlists is filled with correct data, i don’t get any error in console, it just closes immediatly after opening by clickig on them.

But, if i dont use mouse and use only keyboard with tab and space buttons, i can open dropdownlist and select other value in it. But that’s not how anyone want to work with it

This is my listboxes

<div id="example" >
        <div class="demo-section wide">
            @(Html.Kendo().ListBox()
            .Name("optional")
            .DataTextField("Name")
            .DataValueField("SysName")
            .DataSource(source => source
                .Read(read => read.Action("FiltersList_Read", "Links"))
            )
            .TemplateId("customer-item-template")
            .Draggable(draggable => draggable.Placeholder("customPlaceholder"))
            .DropSources("selected")
            .ConnectWith("selected")
            .Toolbar(toolbar =>
            {
                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                toolbar.Tools(tools => tools
                    .MoveUp()
                    .MoveDown()
                    .TransferTo()
                    .TransferFrom()
                    .TransferAllTo()
                    .TransferAllFrom()
                    .Remove());
            })
        )
            @(Html.Kendo().ListBox()
            .Name("selected")
            .DataTextField("Name")
            .DataValueField("SysName")
            .TemplateId("customer-item-template")
            .Draggable(draggable => draggable.Placeholder("customPlaceholder"))
            .DropSources("optional")
            .ConnectWith("optional")
            .BindTo(new List<FilterList>())
        )
        </div>
    </div>

That is my template for listitem

<script id="customer-item-template" type="text/kendo-template">
    <div>
        <span class="k-state-default"><h3>#: data.Name #</h3><p>#: data.SysName #</p></span>
        <div id="div_#=SysName#">
                @(Html.Kendo().DropDownList()
                    .Name("ddl_#=SysName#")
                    .DataTextField("Name")
                    .DataValueField("ItemId")
                    .DataSource(source => source
                        .Read(read => read.Action("Filter_Read", "Links", new { FilterSysName = "#=SysName#" }))
                    )
                    .HtmlAttributes(new { style = "width:100%;" })
                    .Popup(x=>x.AppendTo("ddl_#=SysName#"))
                    .ToClientTemplate()
                )
        </div>
    </div>
</script>

I also uses all styles and some script from demo, but their do nothing to open/close operation (i disable them and nothing changed)