Magento 2: Ui form not loading after adding select field
-
24-03-2021 - |
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.
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.