[FIX] qweb: properly remove t-ref reference

when the node is removed from the dom

src/qweb/extensions.ts

@@ -93,6 +93,7 @@ QWeb.addDirective({
     const refKey = `ref${ctx.generateID()}`;
     ctx.addLine(`const ${refKey} = ${ctx.interpolate(value)};`);
     addNodeHook("create", `context.__owl__.refs[${refKey}] = n.elm;`);
+    addNodeHook("destroy", `delete context.__owl__.refs[${refKey}];`);
   }
 });
 

src/qweb/qweb.ts

@@ -69,7 +69,8 @@ const whitespaceRE = /\s+/g;
 const NODE_HOOKS_PARAMS = {
   create: "(_, n)",
   insert: "vn",
-  remove: "(vn, rm)"
+  remove: "(vn, rm)",
+  destroy: "()"
 };
 
 interface Utils {

tests/component/__snapshots__/component.test.ts.snap

@@ -1536,6 +1536,9 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
       create: (_, n) => {
         context.__owl__.refs[ref11] = n.elm;
       },
+      destroy: () => {
+        delete context.__owl__.refs[ref11];
+      },
     };
     c10.push({text: \`do something\`});
 }"

tests/hooks.test.ts

@@ -234,6 +234,27 @@ describe("hooks", () => {
     expect(fixture.innerHTML).toBe("<div><button>1</button></div>");
   });
 
+  test("useRef hook is null if ref is removed ", async () => {
+    expect.assertions(4);
+    class TestRef extends Component<any, any> {
+      static template = xml`<div><span t-if="state.flag" t-ref="span">owl</span></div>`;
+      spanRef = useRef("span");
+      state = useState({ flag: true });
+      willPatch() {
+        expect(this.spanRef.el).not.toBeNull();
+      }
+      patched() {
+        expect(this.spanRef.el).toBeNull();
+      }
+    }
+    const component = new TestRef(env);
+    await component.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>owl</span></div>");
+    component.state.flag = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div></div>");
+  });
+
   test("can use onPatched, onWillPatch", async () => {
     const steps: string[] = [];
     function useMyHook() {

tests/qweb/__snapshots__/qweb.test.ts.snap

@@ -1911,6 +1911,9 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
       create: (_, n) => {
         context.__owl__.refs[ref3] = n.elm;
       },
+      destroy: () => {
+        delete context.__owl__.refs[ref3];
+      },
     };
     return vn1;
 }"
@@ -1931,6 +1934,9 @@ exports[`t-ref can get a ref on a node 1`] = `
       create: (_, n) => {
         context.__owl__.refs[ref3] = n.elm;
       },
+      destroy: () => {
+        delete context.__owl__.refs[ref3];
+      },
     };
     return vn1;
 }"
@@ -1967,6 +1973,9 @@ exports[`t-ref refs in a loop 1`] = `
           create: (_, n) => {
             context.__owl__.refs[ref6] = n.elm;
           },
+          destroy: () => {
+            delete context.__owl__.refs[ref6];
+          },
         };
         var _7 = context['item'];
         if (_7 || _7 === 0) {