Repository: DevExpress/devextreme-react
Pull request #301 (2019-02-06 11:01:04)

Fix inline templates pulling (#300)
Cherry-pick of #300


Patch:
diff --git a/src/core/options-manager.ts b/src/core/options-manager.ts
index 89f156a..9243157 100644
--- a/src/core/options-manager.ts
+++ b/src/core/options-manager.ts
@@ -1,6 +1,7 @@
 import { ITemplateMeta } from "./template";
 
-import { addPrefixToKeys, getNestedValue, isEmptyObject } from "./helpers";
+import { Children as ReactChildren } from "react";
+import { addPrefixToKeys, getNestedValue } from "./helpers";
 import { createOptionComponent, INestedOptionMeta } from "./nested-option";
 import TemplateHost from "./template-host";
 import { separateProps } from "./widget-config";
@@ -217,10 +218,13 @@ class OptionsManager {
 
             const nestedObjects = this._getNestedOptionsObjects(e.children, templateRegistrationRequired);
 
+            const hasChildrenForTemplate =
+                ReactChildren.count(e.element.props.children) > Object.keys(nestedObjects).length;
+
             if (templateRegistrationRequired) {
                 this._templateHost.add({
                     useChildren: (optionName) => {
-                        return optionName === "template" && !!e.element.props.children && isEmptyObject(nestedObjects);
+                        return optionName === "template" && hasChildrenForTemplate;
                     },
                     props: props.templates,
                     templateProps: configComponent.templates,


Test patch:
diff --git a/src/core/__tests__/template.test.tsx b/src/core/__tests__/template.test.tsx
index 6435ab4..807cd6e 100644
--- a/src/core/__tests__/template.test.tsx
+++ b/src/core/__tests__/template.test.tsx
@@ -472,6 +472,10 @@ describe("component/render in nested options", () => {
                 <CollectionNestedComponent>
                     <NestedComponent itemRender={UserTemplate}/>
                 </CollectionNestedComponent>
+                <CollectionNestedComponent>
+                    <NestedComponent/>
+                    abc
+                </CollectionNestedComponent>
                 <NestedComponent>
                     <CollectionNestedComponent render={UserTemplate} />
                 </NestedComponent>
@@ -491,6 +495,7 @@ describe("component/render in nested options", () => {
             "collection[0].template",
             "collection[1].template",
             "collection[2].option.item",
+            "collection[3].template",
             "option.collection[0].template"
         ]);
     });
@@ -502,17 +507,31 @@ describe("component/render in nested options", () => {
                 <NestedComponent>
                     <UserTemplate/>
                 </NestedComponent>
+
                 <CollectionNestedComponent>
                     <UserTemplate/>
                 </CollectionNestedComponent>
+
                 <CollectionNestedComponent>
                     <UserTemplate/>
                 </CollectionNestedComponent>
-                <CollectionNestedComponent/>
+
                 <CollectionNestedComponent>
                     <NestedComponent/>
                     <UserTemplate/>
                 </CollectionNestedComponent>
+
+                <CollectionNestedComponent>
+                    <NestedComponent/>
+                    abc
+                </CollectionNestedComponent>
+
+                <CollectionNestedComponent>
+                    <NestedComponent/>
+                </CollectionNestedComponent>
+
+                <CollectionNestedComponent/>
+
             </TestComponent>
         );
 
@@ -520,14 +539,21 @@ describe("component/render in nested options", () => {
 
         expect(options["collection[0].template"]).toBe("collection[0].template");
         expect(options["collection[1].template"]).toBe("collection[1].template");
-        expect(options["collection[2].template"]).toBe(undefined);
-        expect(options["collection[3].template"]).toBe(undefined);
+        expect(options["collection[2].template"]).toBe("collection[2].template");
+        expect(options["collection[3].template"]).toBe("collection[3].template");
+        expect(options["collection[4].template"]).toBe(undefined);
+        expect(options["collection[5].template"]).toBe(undefined);
         expect(options["option.item"]).toBe(undefined);
         expect(options["option.template"]).toBe(undefined);
 
         const integrationOptions = options.integrationOptions;
 
-        expect(Object.keys(integrationOptions.templates)).toEqual(["collection[0].template", "collection[1].template"]);
+        expect(Object.keys(integrationOptions.templates)).toEqual([
+            "collection[0].template",
+            "collection[1].template",
+            "collection[2].template",
+            "collection[3].template"
+        ]);
     });
 
     it("renders templates", () => {