Multiselect with autoClose false - Delete input text keeps the items selected

[Salim]

We have 2 weird problems in MultiSelect when autoClose is set to false. They were reproduced in the following example: http://dojo.telerik.com/InicU

Problem 1: Delete input text keeps the items selected

Steps to Reproduce: 

1.Write in the text "le", and then click "enter"

2. Erase in the text everything. The item "Lebanon" remains selected

Problem 2: the entered text remains

Steps to Reproduce:

1. Write in the text "le", and then click "enter". The item "Lebanon" is selected (which is correct), but the text "le" remains (which should be removed)

[Salim]

Also, an additional problem, which is the following:

MultiSelect issue after deleting selected item

Step to reproduce Scenario: http://dojo.telerik.com/OmuGa


Select “4”
Erase it and open the multiselect the “4” remains focused even that the option highlightFirst is set to true 

[Dimiter Topalov]

Hi Salim,

Thank you for contacting us about the described issues. The first one (deleting input keeps the item selected) has already been logged, and you can expect a fix in a future release of Kendo UI. You can track the GitHub issue in our repository:

https://github.com/telerik/kendo-ui-core/issues/2591

The other two described behaviors are actually expected and intended. The text, described in Problem 2 remains when the autoClose option is set to false (otherwise it is cleared). This behavior intends to allow the user to continue selecting from the filtered items, if there is more than one item, passing the filter criteria.

The highlightFirst option is applicable for the first opening when the widget is created. I am sorry if the documentation is not clear enough or misleading.

The desired behavior can be achieved via some custom coding. A possible approach is to handle the deselect event, and manually remove the k-state-focused class, and adding it to the desired list item, e.g.:

http://dojo.telerik.com/OmuGa/2

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Brian]

Is there a work around for Problem 2 listed above. I cannot think of a reason for the default action and I don't know of other controls that act this way.

Thanks for your help

[Nencho]

Hello Salim,

Regarding the requested workaround for the described behaviour in #2 - you can handle the change event of the MultiSelect and clear the current input value. In addition, you would need to ensure that the filtering of the dataSource is cleared:

change: function(e){
  e.sender.input.val("")
 e.sender.dataSource.filter([])
}

Here is a dojo example, demonstrating the above-suggested implementation:

http://dojo.telerik.com/@nenchef/IcIrOrEL/3

Hope this would help.

Regards,
Nencho
Progress Telerik

[Lee]

I tried this but it seems to cause a bug when you click on a lot of options in multiple searches with virtualization set to true. http://dojo.telerik.com/ObEDuRoH

In this example, click 1, 2, 3, 4, 5, 6, 20 without typing anything, It breaks. When it does, you can't select any numbers or clear them out. I was also able to duplicate it by simply clicking 1, 20.

[Neli]

Hi Lee,

i would suggest changing the approach a little bit and clear the text using the search method:

 change: function (e) {
          e.sender.input.val("");
          e.sender.search('');
},

Here you will find the modified Dojo example.

Regards,

Neli

[Lee]

There seems to be a bug with this solution that occurs when the user does the following:

1. Types in a search term (Example: enter "1")
2. Click an item
3. Immediately type in another number (Example: enter "1")
4. Notice that the list doesn't update with the new filtered selections.
5. Type another character
6. Now the list updates

Instead, I found this solution which seems to work:

setTimeout(function () {
    e.sender.input.val("").trigger("input");
});

[Neli]

Hi Lee,

I am glad you have managed to resolve the issue. Thank you very much for sharing the your solution in this scenario. We always appreciate sharing solutions with the community as it will be helpful to the other users in the forum.

Regards,

Neli

[Lee]

This seems to work in the change option of the kendoMultiSelect configuration:

change: function(e) {
  setTimeout(function () {
    e.sender.input.val("").trigger("input");
  });
}