Preconditions (*)
Magento 2.3.3
Description (*)
I have 2 dropdown in UI form. First is simple dropdown, 2nd is UI multiselect dropdown.
In 1st dropdown there are dropdown type product attribute list. In 2nd, There are attribute options list which was selected in 1st dropdown.
Expected result (*)
When I page load, attribute options list (2nd UI multiselect dropdown) should be display which was selected attribute (1st dropdown)
Actual result (*)
Sometimes, working perfect and sometimes, display all attribute options list. Because, UI multiselect element render first when page load.
UI Form Code
<field name="attribute_id">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Vendor\Module\Model\Source\AttributeList</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Attribute</item>
<item name="component" xsi:type="string">Vendor_Module/js/form/element/attribute</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">general</item>
<item name="dataScope" xsi:type="string">attribute_id</item>
<item name="sortOrder" xsi:type="number">60</item>
<item name="mapper" xsi:type="object">Vendor\Module\Model\Source\Mapper</item>
</item>
</argument>
</field>
<field name="attribute_options_list">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Vendor\Module\Model\Source\AttributeListOptions</item>
<item name="config" xsi:type="array">
<item name="additionalClasses" xsi:type="string">required</item>
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Attribute Options List</item>
<item name="componentType" xsi:type="string">field</item>
<item name="formElement" xsi:type="string">select</item>
<item name="component" xsi:type="string">Vendor_Module/js/form/element/ui-select-attribute-filter</item>
<item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
<item name="dataScope" xsi:type="string">attribute_options_list</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="multiple" xsi:type="boolean">true</item>
<item name="levelsVisibility" xsi:type="number">1</item>
<item name="sortOrder" xsi:type="number">80</item>
<item name="required" xsi:type="boolean">true</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>
JS code
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define(['jquery',
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/ui-select'
], function($, _, uiRegistry, ui_select) {
return ui_select.extend({
initialize: function () {
this._super();
var field = uiRegistry.get('index = attribute_id');
console.log(field.value());
}
})
})
How to solve this issue that everytime, I get value when initialize element?
Any help would be appreciated.
Thanks !!