Multi select inputs with a total of 1.000 choices on one page freezes browser

[marvinschroeder]

We were using two select inputs with "multiple" enabled on one page. Each input has around 500 option entries and approx. half of them were selected.

The first click ("focus") in the Choices inputs and the "blur" click were freezing the browser (Chrome/Safari/Firefox) for 2-4 seconds. The browsers were furthermore regulary freezing if we were trying to scroll without touching the input, but clicking on some other page content before (blur click).

The inputs:

<select class="choices-multiple-remove-button" name="example" multiple">...options...</select>

Have the following configuration:

new Choices('.choices-multiple-remove-button', {
                removeItemButton: true,
                position: 'bottom',
                renderChoiceLimit: 10,
                duplicateItemsAllowed: false,
});

Is there anything we can do to increase the performance?

EDIT: We tested this with only a few options entries selected (10%) and with around half of them (50%). The more option entries were selected, the longer and more were the freezes. So the amount of selected choices together with the focus/blur clicks were the performance killers. The debugger console confirms that: [Violation] 'click' handler took 3422ms

[martijnhartlief]

Probably related to #522

[Xon]

This is "better" but isn't great with v11.0.0. The problem is down to just re-rendering too many items at once