Repository: DevExpress/devextreme-vue
Pull request #711 (2023-05-18 14:28:21)

fix: templates added to configuration components dynamically are not rendered (T1159873)


Patch:
diff --git a/packages/devextreme-vue/src/core/component.ts b/packages/devextreme-vue/src/core/component.ts
index ea98f66..08e6825 100644
--- a/packages/devextreme-vue/src/core/component.ts
+++ b/packages/devextreme-vue/src/core/component.ts
@@ -99,6 +99,9 @@ function initBaseComponent() {
             thisComponent.$_templatesManager.discover();
 
             thisComponent.$_instance.beginUpdate();
+
+            this.$_applyConfigurationChanges();
+
             if (thisComponent.$_templatesManager.isDirty) {
                 thisComponent.$_instance.option(
                     "integrationOptions.templates",
@@ -118,8 +121,6 @@ function initBaseComponent() {
             }
             thisComponent.$_pendingOptions = {};
 
-            this.$_applyConfigurationChanges();
-
             thisComponent.$_instance.endUpdate();
 
             restoreNodes(this.$el, nodes);


Test patch:
diff --git a/packages/devextreme-vue/src/core/__tests__/component.test.ts b/packages/devextreme-vue/src/core/__tests__/component.test.ts
index 8004876..728ed24 100644
--- a/packages/devextreme-vue/src/core/__tests__/component.test.ts
+++ b/packages/devextreme-vue/src/core/__tests__/component.test.ts
@@ -1419,6 +1419,54 @@ describe("component rendering", () => {
                 expect(typeof integrationOptions.templates["items[0].template"].render).toBe("function");
             });
 
+            it("passes configuration component updates before templates", () => {
+                const NestedItem = createConfigurationComponent({
+                    props: {
+                        template: String
+                    }
+                });
+                (NestedItem as any as IConfigurationComponent).$_optionName = "items";
+                (NestedItem as any as IConfigurationComponent).$_isCollectionItem = true;
+
+                const component = defineComponent({
+                    template: `<test-component :prop1='prop1Value'>
+                                <nested-item v-if="renderTemplate">
+                                    <template #default>
+                                        <div>1</div>
+                                    </template>
+                                </nested-item>
+                            </test-component>`,
+                    components: {
+                        TestComponent,
+                        NestedItem
+                    },
+                    props: {
+                        renderTemplate: {
+                            type: Boolean,
+                            value: false
+                        },
+                        prop1Value: {
+                            type: Number,
+                            value: 1
+                        }
+                    }
+                });
+
+                const wrapper = mount(component);
+
+                wrapper.setProps({
+                    renderTemplate: true,
+                    prop1Value: 2
+                });
+
+                nextTick(() => {
+                    expect(Widget.option.mock.calls[0][0]).toEqual("items");
+                    expect(Widget.option.mock.calls[1][0]).toEqual("integrationOptions.templates");
+                    expect(Widget.option.mock.calls[2][0]).toEqual("items[0].template");
+                    expect(Widget.option.mock.calls[3][0]).toEqual("prop1");
+                });
+            });
+
             it("passes node of nested component as template", () => {
                 const NestedItem = createConfigurationComponent({
                     props: {