[FIX] app: t_call recursive template is bound to the correct this

src/app/template_set.ts

@@ -96,7 +96,10 @@ export class TemplateSet {
       const templateFn = this._compileTemplate(name, rawTemplate);
       // first add a function to lazily get the template, in case there is a
       // recursive call to the template name
-      this.templates[name] = (context, parent) => this.templates[name](context, parent);
+      const templates = this.templates;
+      this.templates[name] = function (context, parent) {
+        return templates[name].call(this, context, parent);
+      };
       const template = templateFn(bdom, this.utils);
       this.templates[name] = template;
     }

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

@@ -251,6 +251,56 @@ exports[`t-call parent is set within t-call with no parentNode 3`] = `
 }"
 `;
 
+exports[`t-call recursive t-call binding this -- static t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
+  const callTemplate_1 = getTemplate(\`recursive\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    setContextValue(ctx, \\"level\\", 0);
+    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-call recursive t-call binding this -- static t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
+  const callTemplate_1 = getTemplate(\`recursive\`);
+  
+  let block3 = createBlock(\`<div block-handler-0=\\"click.stop\\"><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let b2;
+    if (ctx['level']<2) {
+      let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(this), ctx];
+      let txt1 = ctx['level'];
+      let b3 = block3([hdlr1, txt1]);
+      ctx = Object.create(ctx);
+      ctx[isBoundary] = 1;
+      setContextValue(ctx, \\"level\\", ctx['level']+1);
+      let b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+      ctx = ctx.__proto__;
+      b2 = multi([b3, b4]);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
 exports[`t-call sub components in two t-calls 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/t_call.test.ts

@@ -206,4 +206,42 @@ describe("t-call", () => {
 
     expect(fixture.innerHTML).toBe(`<div id="0"></div><div id="1"></div>`);
   });
+
+  test("recursive t-call binding this -- static t-call", async () => {
+    let clickCount = 0;
+    class Parent extends Component {
+      onClicked?: Function;
+      setup() {
+        const instance = this;
+
+        this.onClicked = function () {
+          clickCount++;
+          expect(this).toBe(instance);
+        };
+      }
+
+      static template = xml`
+          <div><t t-call="recursive"><t t-set="level" t-value="0" /></t></div>
+      `;
+    }
+
+    const app = new App(Parent);
+    app.addTemplate(
+      "recursive",
+      `
+        <t t-if="level &lt; 2" >
+          <div t-on-click.stop="onClicked.bind(this)" t-esc="level" />
+          <t t-call="recursive">
+            <t t-set="level" t-value="level + 1" />
+          </t>
+        </t>
+    `
+    );
+
+    await app.mount(fixture);
+    for (const div of fixture.querySelectorAll("div")) {
+      div.click();
+    }
+    expect(clickCount).toBe(2);
+  });
 });