[FIX] refs in recursive templates now work properly

tests/blockdom/block_refs.test.ts

@@ -1,4 +1,5 @@
 import { createBlock, mount, patch, remove } from "../../src/blockdom";
+import { logStep } from "../helpers";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------
@@ -55,3 +56,15 @@ test("is in dom when callback is called", async () => {
 
   mount(tree, fixture);
 });
+
+test("callback ref in callback ref with same block", async () => {
+  const block = createBlock('<p block-ref="0"><block-text-1/><block-child-0/></p>');
+  let refFn = (el: HTMLParagraphElement) => logStep(el.outerHTML);
+
+  const child = block([refFn, "child"], []);
+  const parent = block([refFn, "parent"], [child]);
+  mount(parent, fixture);
+
+  expect(fixture.innerHTML).toBe("<p>parent<p>child</p></p>");
+  expect(["<p>child</p>", "<p>parent<p>child</p></p>"]).toBeLogged();
+});

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

@@ -38,6 +38,26 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 }"
 `;
 
+exports[`refs refs and recursive templates 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`root\`] = el;
+    let b2;
+    let txt1 = ctx['props'].tree.value;
+    if (ctx['props'].tree.child) {
+      b2 = component(\`Test\`, {tree: ctx['props'].tree.child}, key + \`__1\`, node, ctx);
+    }
+    return block1([ref1, txt1], [b2]);
+  }
+}"
+`;
+
 exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/refs.test.ts

@@ -1,5 +1,5 @@
-import { Component, mount, useRef, useState } from "../../src/index";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { Component, mount, onMounted, useRef, useState } from "../../src/index";
+import { logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 import { xml } from "../../src/index";
 
 snapshotEverything();
@@ -100,4 +100,27 @@ describe("refs", () => {
     expect(console.warn).toBeCalledTimes(1);
     console.warn = consoleWarn;
   });
+
+  test("refs and recursive templates", async () => {
+    class Test extends Component {
+      static components = {};
+      static template = xml`
+        <p t-ref="root">
+          <t t-esc="props.tree.value"/>
+          <t t-if="props.tree.child"><Test tree="props.tree.child"/></t>
+        </p>`;
+      root = useRef("root");
+
+      setup() {
+        onMounted(() => logStep(this.root.el!.outerHTML));
+      }
+    }
+    Test.components = { Test };
+
+    const tree = { value: "a", child: { value: "b", child: null } };
+
+    await mount(Test, fixture, { props: { tree } });
+    expect(fixture.innerHTML).toBe("<p>a<p>b</p></p>");
+    expect(["<p>b</p>", "<p>a<p>b</p></p>"]).toBeLogged();
+  });
 });