Need More Info
Last Updated: 03 Sep 2024 10:28 by ADMIN
Aaron
Created on: 21 Aug 2024 22:25
Category: ComboBox
Type: Bug Report
1
Inconsistent behavior when entering text into a ComboBox with Virtualization enabled

I'm getting inconsistent behavior when testing a ComboBox with Virtualization enabled. I've tested with both the ASP.NET Core demo and the jQuery demo. The .NET demo defaults to version 2024.2.514 and the jQuery defaults to the current version (2024.3.806), however I've tested with several different versions in the jQuery demo and they all yielded the same results.

Note: if you're unable to recreate any of the problems below, try refreshing the demo page and trying again. When additional data is loaded into the list via Ajax requests (ex. after scrolling through the list), this can interfere with the tests below. Refreshing will ensure there is no additional data from Ajax requests and only the data that was initially loaded into the list (the first 80 results).

 

Königlich

If you copy/paste the value "Königlich" into the textbox, the list of options is displayed with a matching option listed first (everything is working as expected so far):

If you hit backspace, however, the list of options is updated and the first option no longer matches (at all):

If you hit backspace again, the list of options is updated again, and now the matching value is back:

Backspace again, matching option disappears and the bad one is back:

It alternates like this each time you hit backspace, bouncing between a good matching value and a bad one that seems completely unrelated.

 

Queen

If you enter "Q", the list opens and the first option listed matches:

Add a "u" and the first option is no longer the match. However, the matching option is listed halfway down the list. Note that with Königlich above, this was not the case (notice in the screenshots above the first option has a border around it; there was no option in the middle of the list with a border).

Add "ee" ("Quee") and you're left with no more matches:

However, if you open the list and scroll down to 10372, you'll find there is in fact an option for "Queen" available that the previous entry wasn't finding:

 

Bon app

If you enter "B", the first option listed is a match. If you add an "o" ("Bo"), you're left with no matches:

But if you scroll down to 10331, there's an option for "Bon app" listed that wasn't matched above:

 

Blauer See Delikatessen

Same as above. Entering "Bl" finds a match, but "Bla" does not. Open the list and scroll down to 10501 to see the option that should have matched.

 

Summary

There seem to be several issues here:

  1. Alternating between finding a matching value then finding a random value as each character is entered (most prevalent with Königlich).
  2. Some options cannot be found via filtering (ex. all but the first above). Not only is it not running Ajax requests to find matches in options that haven't been loaded yet, but it also doesn't appear to find matches in options that have already been loaded via Ajax.
  3. Matched option displayed in the wrong location (in most cases the match was displayed first in the list, but in one of the examples above it's in the middle of the list).
4 comments
ADMIN
Georgi Denchev
Posted on: 03 Sep 2024 10:28

Hello, Aaron,

I noticed that my colleague Mihaela has already replied in the other thread and shared that the resources will be updated accordingly.

Thank you for the provided feedback!

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Aaron
Posted on: 28 Aug 2024 11:35

I haven't had a chance to play around with it very much, but from what I'm seeing so far, it looks like that was the missing piece and things behave much better with that in place. Thanks!

That said, this seems like a very important omission from (at least) the following:

Additionally, it might also be nice if changes were made to either avoid such unexpected behavior or make it much more apparent when this type of invalid setup/configuration is being used. It seems like ideally, maybe a "begins with" or "contains" filter would be used as a default when server filtering is enabled. Alternatively, maybe throw an exception (or log an error, display a message, etc.) during initialization if server filtering is enabled but a filter operation has not been specified.

Thanks again for the help!

ADMIN
Georgi Denchev
Posted on: 28 Aug 2024 10:17

Hi, Aaron,

Thank you for the provided details.

You are correct that a request should be fired every time you type a new letter when `serverFiltering` is enabled.

However, there is one more requirement and that is to specify the filter "operation" in the configuration of the component:

$("#orders").kendoComboBox({
          filter: "contains",

Once this option is configured, you should see the expected behavior:

https://dojo.telerik.com/@gdenchev/uFAZeKEj 

Could you review the sample and let me know if everything looks fine on your end?

Best Regards,
Georgi Denchev
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

Aaron
Posted on: 24 Aug 2024 17:59

Following up on this, any information I could get would be helpful. Even if you haven't had a chance to look into this and try recreating this behavior, can you clarify the expected behavior? I had a specific use case I was hoping to use a ComboBox with virtualization but I wasn't sure how exactly it would work so I was testing to determine if it would meet our needs. Knowing how it's expected to work (regardless of how it's currently actually working) would at least help determine if this is a viable option if/when issues are addressed, or if I should move on to looking for other controls/options.

More specifically, if I enter a value that doesn't match any of the options already loaded in the list, is it expected that the ComboBox will run an Ajax request to get the first X set of matching options (X = page-size) and display the dropdown list with those options? For example, an alphabetical list of US cities and states with only 80 options loaded at a time, and entering "New" to get a list of the first 80 cities that begin with "New" (none of which would have been in the list of the 80 options initially loaded).