Skip to content

Magento 2 ui-select component with 20k+ options crashes browser

I have a ui-select component (multiselect) that loads all options of an attribute (e.g.: manufacturer). This attribute has over 20,000 options which makes the browser crash when loading the UI component.

enter image description here

My form component layout looks like this:

    <field name="manufacturer" formElement="select" component="Magento_Ui/js/form/element/ui-select">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">companybrand</item>
                <item name="filterOptions" xsi:type="boolean">true</item>
                <item name="chipsEnabled" xsi:type="boolean">false</item>
                <item name="disableLabel" xsi:type="boolean">true</item>
                <item name="multiple" xsi:type="boolean">true</item>
            </item>
        </argument>
        <settings>
            <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
            <dataType>text</dataType>
            <label translate="true">Associated Brands</label>
            <dataScope>manufacturer</dataScope>
            <validation>
                <rule name="required-entry" xsi:type="boolean">true</rule>
            </validation>
            <componentType>field</componentType>
        </settings>
        <formElements>
            <select>
                <settings>
                    <options class="CompanyBrandCompanybrandSourceManufacturer"/>
                </settings>
            </select>
        </formElements>
    </field>

I really want to utilise the cool UI-Select component but the way it loads all the options is killing me.

Any ideas how I can optimise this for 20000+ options to make it useable?

Thanks