diff --git a/src/runtime/template_set.ts b/src/runtime/template_set.ts
index 6868e612..83bc4450 100644
--- a/src/runtime/template_set.ts
+++ b/src/runtime/template_set.ts
@@ -125,7 +125,7 @@ export class TemplateSet {
callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
const template = this.getTemplate(subTemplate);
- return toggler(subTemplate, template.call(owner, ctx, parent, key));
+ return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
}
}
diff --git a/tests/components/__snapshots__/t_call.test.ts.snap b/tests/components/__snapshots__/t_call.test.ts.snap
index 31284ce1..b5825bdc 100644
--- a/tests/components/__snapshots__/t_call.test.ts.snap
+++ b/tests/components/__snapshots__/t_call.test.ts.snap
@@ -42,6 +42,56 @@ exports[`t-call dynamic t-call 3`] = `
}"
`;
+exports[`t-call dynamic t-call with same sub component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+ const call = app.callTemplate.bind(app);
+
+ return function template(ctx, node, key = \\"\\") {
+ const b2 = text(ctx['current'].template);
+ const template1 = (ctx['current'].template);
+ const b3 = call(this, template1, ctx, node, key + \`__1\`);
+ return multi([b2, b3]);
+ }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+ const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+
+ return function template(ctx, node, key = \\"\\") {
+ return comp1({}, key + \`__1\`, node, this, null);
+ }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+
+ return function template(ctx, node, key = \\"\\") {
+ return text(\`child\`);
+ }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 4`] = `
+"function anonymous(app, bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+ const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+
+ return function template(ctx, node, key = \\"\\") {
+ return comp1({}, key + \`__1\`, node, this, null);
+ }
+}"
+`;
+
exports[`t-call dynamic t-call: key is propagated 1`] = `
"function anonymous(app, bdom, helpers
) {
diff --git a/tests/components/t_call.test.ts b/tests/components/t_call.test.ts
index 3e70dd6e..2080560e 100644
--- a/tests/components/t_call.test.ts
+++ b/tests/components/t_call.test.ts
@@ -398,4 +398,31 @@ describe("t-call", () => {
});
expect(fixture.innerHTML).toBe("");
});
+
+ test("dynamic t-call with same sub component", async () => {
+ class Child extends Component {
+ static template = xml`child`;
+ }
+
+ class Root extends Component {
+ static template = xml`
+
+ `;
+ static components = { Child };
+ current = useState({ template: "A" });
+ }
+
+ const root = await mount(Root, fixture, {
+ templates: `
+
+
+
+ `,
+ });
+ expect(fixture.innerHTML).toBe("Achild");
+
+ root.current.template = "B";
+ await nextTick();
+ expect(fixture.innerHTML).toBe("Bchild");
+ });
});