Kendo-angular: ComboBox cannot be opened with ~1000 options in IE11

[alexeykostevich]

I'm submitting a...

• Bug report

Current behavior

It is almost impossible to open a _ComboBox_ with 1000 options in _IE11_. A _ComboBox_ unexpectedly loses focus and collapses instead of opening.

Expected behavior

A _ComboBox_ opens and let a user select an option regardless of the number of options. However, the large number of options can cause reasonable freezing and delays in _IE_.

Minimal reproduction of the problem with instructions

https://plnkr.co/edit/Yl6pIiMLqD8uoqQPsYaV?p=preview

What is the motivation or use case for changing the behavior?

Having data sources of medium size in business applications is common. It is essential for users to be able to browse such data sources and select a necessary item.

Environment

Package versions:

+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

Browser:

• IE version 11

System:

• TypeScript version: 2.6.2
• Node version: 8.9.4 (npm 5.6.0)
• Platform: Windows

There was a visually similar issue caused by slow rendering performance of attribute selectors in IE11 (which are heavily used in our app): https://github.com/telerik/kendo-angular/issues/1096

However, this issue is reproducible even in demo examples without the use of attribute selectors.

[alexeykostevich]

Could I ask whether it is possible to fix this issue with reasonable effort? I can imagine that the issue is caused by bad IE performance and can be really challenging.

Unfortunately, the issue prevents from delivering expected functionality and design. Probably, we can proceed with another approach (like displaying a pageable grid with selection) as a temporary workaround.

@tapopov , what data source size would you recommend to use with Kendo UI DropDowns?

Thank you!

[tapopov]

Hi @alexeikostevich
Indeed, the issue is related to IE's performance and while we will investigate further, at this point there's not much we can do. My advice is to initialize the component with as few items as possible and solely rely on its filtering capabilities. Scrolling through hundreds of items is not particularly good UX anyways.

[alexeykostevich]

Hello @tapopov ,

Thank you for the advice! I fully agree with your point.

While we try to limit the number of options in drop-downs where it is possible, there are a couple of scenarios where it is difficult to achieve.

This stems from enterprise applications using by companies that vary significantly in their sizes and the amount of data they produce. While small/medium companies would like to have an ability to see a list of all available options in a drop-down, the largest usually use just filtering instead. Unfortunately, our application has to address both use cases.

Fundamentally, virtualization (as in Kendo UI for jQuery) would solve all issues and cover the requirements. Here are related feature requests:

• DropDownList Virtualization
• Virtualization support for AutoComplete & MultiSelect controls

This feature could be a real game changer for awesome Kendo UI DropDowns!

[alexeykostevich]

Also, probably, it is worth to mention that the maximum number of options for IE11 decreases with the complexity of a page. For our scenarios, it is nearly 450-500.

[alexeykostevich]

Dear @tapopov ,

Please, could I ask you whether there is any roadmap for these feature requests?

• DropDownList Virtualization
• Virtualization support for AutoComplete & MultiSelect controls

Unfortunately, this feature is really essential for our product suite, and we are going to start working on this shortly. Understanding the plans could be extremely helpful and let to adjust development accordingly.

Thank you!

[tapopov]

Hi @alexeikostevich
While we are well aware of the necessity for both data and UI virtualization, the feature is not yet scheduled for implementation.
We will update our Roadmap once a specific time-frame is set.

[alexeykostevich]

That's good to know! Thank you so much for sharing, @tapopov !

[pooya1361]

Hi,
I just want to say that we have exactly the same problem in IE. @alexeikostevich have you found any work around for this issue?
BR,

[scatcher]

We're having the same issue. The control in unusable in IE with 1000+ options.

[pooya1361]

Use filter to reduce the amount of options

[scatcher]

@pooya1361 Not sure what you mean, they are all valid options.

[jameswilson281]

@scatcher Yeah, man, just remove all the options and it'll perform great!

All joking aside, we are having this same issue. While "just show fewer options" would be an ideal solution, real world requirements sometimes preclude us from the "ideal solution".

We are loving the KendoUI work, however this one issue is a huge thorn in our side.

[MaklaCof]

I really can't understand why filter is such a big problem.

I am pretty sure you also have some table with 10 thousands, 100 thousands, million or more records and you don't display all records in grid.

Also allow user to scroll through 1000+ records is also poor design.

The best solution, if filtering is unacceptable, I see in this feature request if it would be implemented (for Grid and DropDowns).

[jameswilson281]

I really can't understand why filter is such a big problem.

I'm sorry you aren't understanding.

I am pretty sure you also have some table with 10 thousands, 100 thousands, million or more records and you don't display all records in grid.

You are comparing apples to oranges here. I'm not sure if you are being sarcastic but I'll assume the best and just say that I'm not sure how making this kind of assumption is constructive to the issue at hand.

Also allow user to scroll through 1000+ records is also poor design.

Stating this when you have no idea what our requirements are is a bit ignorant, don't you think? The real world is full of projects with requirements that don't always fit into the nice little box of superficial hello-world-todo-list examples repeated ad nauseum on the web.

The best solution, if filtering is unacceptable, I see in this feature request if it would be implemented (for Grid and DropDowns).

Thank you for the suggestion here, but I'm afraid infinite scroll isn't what we're looking for.

I was hoping to find some solution to the issue at hand, which is that the control becomes unusable in IE, and, should there not be a known solution, adding my voice to the list of developers experiencing this issue (which is, after all, what these issue threads are for).

[MaklaCof]

My intention was definitely not sarcastic.
I only wanted to say that some things simply can not be achieved. You can not pull 10 tons trailer with personal car.

Probably the best solution is virtualization and as kendo team already respond:

While we are well aware of the necessity for both data and UI virtualization, the feature is not yet scheduled for implementation.

I wanted to say that filtering is probably the only option right now. You can also upvote feature request for virtualization.

[tapopov]

Closing as duplicate of https://github.com/telerik/kendo-angular/issues/2195