enterprise: Multiselect dropdown control has poor performance in IE11 when dropdown list contains +500 options

Describe the bug We are using several SOHO multiselect controls to allow a user to filter options in a form. The multiselect controls contain options anywhere from 50-2000 range. The time it takes to open the dropdown, from once a user clicks into the control and when the dropdown actually opens, performs well in most modern browsers. The more options contained in a multiselect control, the longer it takes to open. This is understandable, as once the control is built, it is has to loop through all the OPTION elements within the SELECT element, build the dropdown list control element, and then append it to the document.

After testing in IE11, the performance is significantly worst, when compared to other modern browsers. I conducted some testing and included my results and process for testing below.

To accurately test the time it takes to open the dropdown, I created 2 variables within the open method of the the Dropdown plugin.

I defined a variable to log the performance at the start of the open method:

var performanceCheckStart = performance.now();

I defined a variable to log the performance at the end of the open method:

var performanceCheckEnd = performance.now();

At the end of the open method, once it is complete, I subtract the start time from the end time to get the total time (in milliseconds) elapsed.

console.log("Call to open took " + (performanceCheckEnd - performanceCheckStart) + " milliseconds.");

I conducted 10 tests for multiselect controls with the following # of options in the list:

• 100
• 500
• 1000
• 1500
• 2000

These tests were conducted on 2 browsers:

• Chrome v69.0.3497.100 (latest) on Mac OS
• Internet Explorer 11 on Win 7

I averaged the results from each of the browser tests conducted and put them in the table below. Please note the response time is in milliseconds.

Chrome on Mac OS

# options	100	500	1000	1500	2000
ms	53	170.26	317.93	474.15	756.73

IE 11 on Win 7

# options	100	500	1000	1500	2000
ms	174.31	648.29	1257.99	1836.29	2497.06

Based on these results, it is clear that there is significant loss of performance across the browsers and as more options appear within a dropdown list.

To Reproduce Steps to reproduce the behavior: Using the multiselect examples on the SoHo XI web site https://design.infor.com/code/ids-enterprise/4.10.0/demo/multiselect/example-index

1. Add additional options to the multiselect (500, 1000, 1500, 2000)
2. Initialize control
3. In IE 11 (using Windows 7 or Windows 10), click into one of the controls to open the dropdown list. Notice how it is slower to open.

Expected behavior Dropdown list appears once a user clicks into the control, but the performance in IE 11 is very poor when a list contains more than 500 options

Platform

• Device: Laptop (VM)
• OS Version: Windows 7 [Service Pack 1] (also confirmed similar results in Windows 10)
• Browser Name: Internet Explorer (IE11)
• Browser Version: 11.0.9600.19129

Additional context Are there any performance improvements that can be made to get this control opening quicker in IE11?