Question

I have a ui-form for adding new record to my table. But the form is not loading when I add a new select field into it. Here is the field component in the form.xml file,

    <field name="product_type">
        <argument name="data" xsi:type="array">                
            <item name="options" xsi:type="object">Trust\Orders\Model\Pickups\Source\Options</item>
            <item name="config" xsi:type="array">
                <item name="componentType" xsi:type="string">field</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string">Product Type</item>
            </item>
        </argument>
    </field>  

The model Trust\Orders\Model\Pickups\Source\Options is returning the array of value and label. The form is loading when I comment out this component. I also tried with the sample source code found in official magento2 documentation,

<field name="select_example" formElement="select">
        <settings>
            <dataType>text</dataType>
            <label translate="true">Select Example</label>
            <dataScope>select_example</dataScope>
        </settings>
        <formElements>
            <select>
                <settings>
                    <options>
                        <option name="1" xsi:type="array">
                            <item name="value" xsi:type="string">1</item>
                            <item name="label" xsi:type="string">Option #1</item>
                        </option>
                        <option name="2" xsi:type="array">
                            <item name="value" xsi:type="string">2</item>
                            <item name="label" xsi:type="string">Option #2</item>
                        </option>
                        <option name="3" xsi:type="array">
                            <item name="value" xsi:type="string">3</item>
                            <item name="label" xsi:type="string">Option #3</item>
                        </option>
                    </options>
                    <caption translate="true"> Please Select </caption>
                </settings>
            </select>
        </formElements>
    </field>

This is showing an error in the console as below,

select.js:67 Uncaught TypeError: data.some is not a function

Could someone please tell me what need to be done to add a select field in the form.

Was it helpful?

Solution

This issue was found in the file vendor/magento/module-ui/view/base/web/js/form/element/select.js. We need to override and add the changes to the file as below. Find the code,

data.some(function (node) {
    value = node.value;

    if (Array.isArray(value)) {
        value = findFirst(value);
    }

    return !_.isUndefined(value);
}); 

Replace with the updated code,

data = _.some(data, function (node) {
    value = node.value;
    if (Array.isArray(value)) {
        value = findFirst(value);
    }

    return !_.isUndefined(value);
});

Please share if there is a better way.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top