Kendo MultiSelect won't stay open on first selection only

2 Answers 71 Views
MultiSelect
Paul
Top achievements
Rank 1
Iron
Iron
Veteran
Paul asked on 07 Jul 2022, 08:17 PM

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)
)

2 Answers, 1 is accepted

Sort by
1
Accepted
Yanislav
Telerik team
answered on 12 Jul 2022, 11:07 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Paul
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 15 Jul 2022, 02:29 PM

@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
Telerik team
commented on 20 Jul 2022, 10:30 AM

Hi


Tags
MultiSelect
Asked by
Paul
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Yanislav
Telerik team
Paul
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or