Skip to content

Magento 2 – in a ui-select dropdown, how can I stop some nodes from being selected or clicked?

I added a custom field to product-form.xml in a custom module:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="product-details">
        <field name="customfield">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">VendorModuleUiComponentProductFormCategoriesOptions</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Fiel Label</item>
                    <item name="componentType" xsi:type="string">field</item>
                    <item name="formElement" xsi:type="string">select</item>                    
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
                    <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                    <item name="dataScope" xsi:type="string">customfield</item>
                    <item name="source" xsi:type="string">product-details</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="showCheckbox" xsi:type="boolean">true</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                    <item name="chipsEnabled" xsi:type="boolean">false</item>
                    <item name="multiple" xsi:type="boolean">false</item>
                    <item name="levelsVisibility" xsi:type="number">1</item>
                    <item name="sortOrder" xsi:type="number">130</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="notice" xsi:type="string" translate="true">Use this to override the default mapping</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="listens" xsi:type="array">
                        <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

The options are generated by a function with:

        $collection = $connection->fetchAll($sql);
        foreach($collection as $item)
        {
            if($item['type'] == 'root')
            {
                $tree[$item['id']]['value'] = $item['id'];
                $tree[$item['id']]['label'] = $item['text'];
            }

            if($item['type'] == 'node')
            {
                $tree[$item['parent']]['optgroup'][] = [
                    'value' => $item['id'],
                    'label' => $item['text']
                ];
            }
        }

This results in a dropdown with 2 levels. I want to stop parent nodes from being selected.

enter image description here

Any ideas how this can be accomplised?