This is a migrated thread and some comments may be shown as answers.

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

4 Answers 371 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Salim
Top achievements
Rank 1
Salim asked on 24 Jan 2017, 08:11 AM

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)

4 Answers, 1 is accepted

Sort by
0
Salim
Top achievements
Rank 1
answered on 24 Jan 2017, 02:15 PM

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 

0
Dimiter Topalov
Telerik team
answered on 26 Jan 2017, 07:42 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Brian
Top achievements
Rank 1
answered on 25 Feb 2019, 07:36 PM

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

0
Nencho
Telerik team
answered on 27 Feb 2019, 12:45 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
MultiSelect
Asked by
Salim
Top achievements
Rank 1
Answers by
Salim
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Brian
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or