Select event triggered incorrectly

[Dan]

I have to display a table in an autocomplete and I thought of using the MultiColumnComboBox but I need the select event to be triggered only when the user selects a row from the table. However I have found that it can be triggered as selected even though no row was selected.

In order to reproduce it go to the Events page of the MultiColumnComboBox. Select an item. The event is triggered and the item is the one displayed. Now delete one character and click outside of the control for the list to close. The select is triggered with no item. Click inside the control and delete another character then click outside of the control for the list to close. The select event is triggered and instead of no item selected you received that the previous item is selected even though in the combobox control the text is not filled with the selected item.

 

Is this function as design? How can I overcome this functionality cause when a row is selected I need to execute some code and I do not want to execute that code when in fact the user did not select a row.

[Ivan Danchev]

Hello Dan,

This behavior is by design because the widgets takes the input text as value. It works like that:

1. Let's say the user selects the "Africa" item. The select event fires.

2. The user then deletes a letter ("a") and clicks outside the widget. "Afric" remains in the input and the widget sets this text as value. Its value() API method now returns "Afric". Because of that change of value the select event fires.

If you have some logic in the select event handler that must be executed only when an item is actually selected in the list, then you can do that with the help of the following logic in the select event handler:

function onSelect(e) {
  if (!e.dataItem) {
    e.preventDefault();
  }
  else {
    //execute your logic here
    
    if ("kendoConsole" in window) {
      kendoConsole.log(e.dataItem.text);
    }
  }
}

See this dojo example, which demonstrates it.

If e.dataItem has a value this would indicate the select event has fired when the user has selected an item. If it doesn't that means the select event has fired in the scenario described in 2. Note though that the event is prevented in this case, which means the widget won't accept a value that is not present in the data. If we look at the scenario above that means the user can still filter the data by deleting characters, but "Afric" won't be accepted as value on blurring the widget.

The event prevention is needed, because of something unexpected in the discussed behavior. I don't find expected e.dataItem to point at the previously selected item after 2 consecutive changes of the value by deleting a letter in the input (what you have described in your post). I will discuss this with the team to clarify the expected behavior, but I would expect e.dataItem to remain undefined until a selection is made in the list. If this were the case preventing the event, as shown in the dojo linked above, won't be needed, instead only e.dataItem's value could be checked to differentiate between a value change caused by selection, or by typing/deleting characters in the input area.

I will get back to you with more information as soon as I have it.

Regards,
Ivan Danchev
Progress Telerik

[Dan]

Hi Ivan,

Your dojo does not behave like the demo from the Kendo UI.

After I delete "a" from "Africa" and remain with "Afric" and click outside of the list and control then the text changes back to "Africa".

Please look at the Kendo UI demo (The MVC uses item instead of dataItem) with the events and do the following steps:

1. Select "Item 1"

2. Delete "1" and click outside. The select event is not triggered and the text remains "Item "

3. Delete the space and click outside. Surprise the select event is triggered and the e.dataItem is "Item 1" even though the text of the control is still "Item"

[Ivan Danchev]

Hi Dan,

In both the Kendo UI demo and the MVC demo the select event fires in the 1. - 2. scenario: see this screencast. It fires, but e.item and e.dataItem do not contain data, which is expected since no item is selected, which is why only "event :: select" is logged in the console.

On subsequent character deletion (3.) e.item and e.dataItem return data of the initially selected item. This is incorrect behavior and we logged it for fixing: bug report item.

With regard to the select event firing even though there is no item selection, this behavior the MultiColumnComboBox inherits from the ComboBox. Both widgets allow custom value (one that is not present in the data) to be set in the widget. The select event fires before the change event and "select" is preventable, whereas "change" is not. So whenever a prevention of the change event is needed this is done through preventing the select event. If the "select" event does not fire in the discussed scenario, "change" won't be preventable. For consistency purposes, and to allow the change event to be prevented in both scenarios, when an item is selected in the list and when a custom value is set, the select event fires in both cases.

I updated your Telerik points for your involvement in identifying this bug.

 

Regards,
Ivan Danchev
Progress Telerik