Kendo MultiSelect won't stay open on first selection only

[Paul]

Using Kendo UI for ASP.MVC with jQuery, version 2022.1.301. Here are the steps:

1. Click in multi select
2. Drop down appears
3. Select any item
4. Drop down closes - This is the issue
5. Click in the multi select again
6. Drop down appears
7. Toggle any item(s) on or off and it will now stay open and work perfectly fine!
8. Click outside the multiselect and it closes as expected

The issue is step 4. I have been debugging through kendo.all.js and I can provide a small bit of inside. The issue lies at line 64,761 which is a function called _inputFocusout. When I click in the multiselect in step 1, the input box is focused and the cursor is blinking. When I click in it the second time the cursor doesn't show, rather "1 item(s) selected" is showing. So the focus out event doesn't happen now, and it works.

Oddly this works in the demos but I can't see anything I am doing wrong.

@(Html.Kendo().MultiSelectFor(m => m.SelectedEmployees)
   .AutoBind(true)
   .AutoClose(false)
   .BindTo(employeesSmall)
   .DataTextField("NameFirstLast")
   .DataValueField("Id")
   .Name("employees")
   .TagMode(TagMode.Single)
)

[Yanislav]

Hello Paul,

Thank you for writing to us. 

Indeed, it is strange that the MultiSelect closes after selecting an element. Based on the information and the shared code snippets, I could not find anything that might be forcing the MultiSelect to close.

However, since the provided details are not enough for me to be sure what is causing the observed behavior, I went ahead and tested the behavior. I've used a similar MultiSelect configuration to the one you've shared and on my side, everything seems to be working correctly.

https://www.screencast.com/t/6RlIJlZYVu9R

What I can recommend you is to check if there are any JS exceptions in the dev tools console of the browser that may cause the problem. Also check if there are any custom JS files that may affect the functionalities of the MultiSelect. 

Please make the needed checks at your end and let me know the results. In case you are still unable to find the reason for the problem, may I ask you to share more information about how to reproduce the problem? Even better would be if you can reproduce the issue in a sample project and send it to me. Thus, I will be able to investigate the problem and try to find a possible solution.

Regards,
Yanislav
Progress Telerik

[Paul]

@Yanislov thank you for looking at this.

I created a stand alone project and the darn thing worked perfectly fine.

One by one I eliminated scripts and logic from my page until it was all gone, yet the problem remained. I then started removing CSS files. Finally the problem went away. After some trial and error I narrowed it down to one line of CSS I had that happened to be hiding the inner input box of the control (the k-input-inner class item). Removing that single line of CSS solved the issue.

So the problem was completely user error.

[Eyup]

Hi Paul,

I am glad that you have found a viable solution for this scenario and thank you for sharing your approach with our community.