SelectBox: Should render only the latest passed value when async template is used (T1262587) (DevExpress#29122)

Co-authored-by: Ruslan Farkhutdinov <[email protected]>

Author: r-farkhutdinov

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts

@@ -353,12 +353,8 @@ const DropDownEditor = TextBox.inherit({
       container: getPublicElement($templateWrapper),
       onRendered: () => {
         if (this._activeRenderContext !== currentRenderContext) {
-          return;
-        }
-
-        const isRenderedInRoot = !!this.$element().find($templateWrapper).length;
+          $templateWrapper.empty();
 
-        if (!isRenderedInRoot) {
           return;
         }
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js

@@ -77,6 +77,7 @@ const OVERLAY_CONTENT_CLASS = 'dx-overlay-content';
 const CLEAR_BUTTON_AREA = 'dx-clear-button-area';
 const SCROLLVIEW_CONTENT_CLASS = 'dx-scrollview-content';
 const LIST_ITEMS_CLASS = 'dx-list-items';
+const DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER = 'dx-dropdowneditor-field-template-wrapper';
 
 const KEY_DOWN = 'ArrowDown';
 const KEY_ENTER = 'Enter';
@@ -4383,6 +4384,49 @@ QUnit.module('Async tests', {}, () => {
             this.clock.restore();
         }
     });
+
+    QUnit.test('component with async fieldTemplate render only one value on re-render (T1262587)', function(assert) {
+        const clock = sinon.useFakeTimers();
+
+        const $selectBox = $('#selectBox').dxSelectBox({
+            items: [1, 2, 3],
+            fieldTemplate: 'custom',
+            templatesRenderAsynchronously: true,
+            integrationOptions: {
+                templates: {
+                    custom: {
+                        render: function(args) {
+                            const result = $('<div>');
+                            setTimeout(() => {
+                                result.dxTextBox({
+                                    value: args.model ? args.model.text : '',
+                                });
+
+                                result.appendTo(args.container);
+                                args.onRendered();
+                            }, TIME_TO_WAIT);
+
+                            return result;
+                        }
+                    }
+                }
+            },
+        });
+
+        const instance = $selectBox.dxSelectBox('instance');
+
+        instance.option({ value: 1 });
+        instance.option({ value: null });
+
+        clock.tick(TIME_TO_WAIT);
+
+        const $wrapper = $selectBox.find(toSelector(DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER));
+        const $input = $selectBox.find(toSelector(TEXTEDITOR_INPUT_CLASS));
+        assert.strictEqual($wrapper.children().length, 1, 'only 1 element is rendered');
+        assert.strictEqual($input.val(), '', 'last value is applied');
+
+        clock.restore();
+    });
 });
 
 QUnit.module('regressions', moduleSetup, () => {