[FIX] app, components: dynamic t-call should propagate the key

Have a Component which has a Component node, and a dynamic t-call itself having
a Component node.

Before this commit, both children had the same `key`, (as in the key in parent.children, which registers on the parent all its children).

As a result, the scheduler was endlessly hanging.

After this commit, it works as expected.

src/app/template_set.ts

@@ -51,9 +51,9 @@ export class TemplateSet {
   translateFn?: (s: string) => string;
   translatableAttributes?: string[];
   utils: typeof UTILS = Object.assign({}, UTILS, {
-    call: (owner: any, subTemplate: string, ctx: any, parent: any) => {
+    call: (owner: any, subTemplate: string, ctx: any, parent: any, key: any) => {
       const template = this.getTemplate(subTemplate);
-      return toggler(subTemplate, template.call(owner, ctx, parent));
+      return toggler(subTemplate, template.call(owner, ctx, parent, key));
     },
     getTemplate: (name: string) => this.getTemplate(name),
   });

tests/components/__snapshots__/t_call.test.ts.snap

@@ -41,6 +41,46 @@ exports[`t-call dynamic t-call 3`] = `
 }"
 `;
 
+exports[`t-call dynamic t-call: key is propagated 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { call } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const template1 = (ctx['sub']);
+    let b3 = call(this, template1, ctx, node, key + \`__2\`);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call: key is propagated 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"id\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['id'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call: key is propagated 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
 exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/t_call.test.ts

@@ -183,4 +183,27 @@ describe("t-call", () => {
     fixture.querySelector("p")!.click();
     expect(value).toBe(3);
   });
+
+  test("dynamic t-call: key is propagated", async () => {
+    let childId = 0;
+    class Child extends Component {
+      static template = xml`<div t-att-id="id" />`;
+      id: any;
+      setup() {
+        this.id = childId++;
+      }
+    }
+    const sub = xml`<Child />`;
+
+    class Parent extends Component {
+      static template = xml`<Child /><t t-call="{{ sub }}"/>`;
+      static components = { Child };
+
+      sub = sub;
+    }
+
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe(`<div id="0"></div><div id="1"></div>`);
+  });
 });