properly call willunmount and destroy hooks

web/static/src/ts/core/Widget.ts

@@ -96,8 +96,12 @@ export class Widget<T extends WEnv> {
 
   destroy() {
     if (!this.__widget__.isDestroyed) {
+      if (this.__widget__.isMounted) {
+        this.willUnmount();
+      }
       if (this.el) {
         this.el.remove();
+        this.__widget__.isMounted = false;
         delete this.__widget__.vnode;
       }
       if (this.__widget__.parent) {

web/static/src/ts/core/qweb_vdom.ts

@@ -704,7 +704,7 @@ const widgetDirective: Directive = {
     ctx.addLine(
       `let def${defID} = _${widgetID}._start().then(() => _${widgetID}._render()).then(vnode=>{c${
         ctx.parentNode
-      }[_${dummyID}_index]=vnode;vnode.data.hook = {create(_,vn){_${widgetID}._mount(vn)}}});`
+      }[_${dummyID}_index]=vnode;vnode.data.hook = {create(_,vn){_${widgetID}._mount(vn)},remove(){_${widgetID}.destroy()}}});`
     );
     ctx.addLine(`extra.promises.push(def${defID});`);
 

web/static/src/ts/widgets/clock.ts

@@ -6,6 +6,8 @@ const template = `<div class="o_clock"><t t-esc="state.currentTime"/></div>`;
 export class Clock extends Widget<Env> {
   name = "clock";
   template = template;
+  interval: any | undefined;
+
   state = {
     currentTime: ""
   };
@@ -15,9 +17,12 @@ export class Clock extends Widget<Env> {
   }
 
   mounted() {
-    setInterval(this.updateTime.bind(this), 500);
+    this.interval = setInterval(this.updateTime.bind(this), 500);
   }
 
+  willUnmount() {
+    clearInterval(this.interval);
+  }
   updateTime() {
     this.updateState({
       currentTime: new Date().toLocaleTimeString()

web/static/tests/core/widget.test.ts

@@ -269,6 +269,49 @@ describe("lifecycle hooks", () => {
     const widget = new ParentWidget(env);
     await widget.mount(target);
   });
+
+  test("widgets are unmounted and destroyed if no longer in DOM", async () => {
+    let steps: string[] = [];
+    class ParentWidget extends Widget<WEnv> {
+      name = "a";
+      state = { ok: true };
+      template = `
+          <div>
+            <t t-if="state.ok"><t t-widget="child"/></t>
+          </div>`;
+      widgets = { child: ChildWidget };
+    }
+
+    class ChildWidget extends Widget<WEnv> {
+      constructor(parent) {
+        super(parent);
+        steps.push("init");
+      }
+      async willStart() {
+        steps.push("willstart");
+      }
+      mounted() {
+        steps.push("mounted");
+      }
+      willUnmount() {
+        steps.push("willunmount");
+      }
+      destroyed() {
+        steps.push("destroyed");
+      }
+    }
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    expect(steps).toEqual(["init", "willstart", "mounted"]);
+    await widget.updateState({ ok: false });
+    expect(steps).toEqual([
+      "init",
+      "willstart",
+      "mounted",
+      "willunmount",
+      "destroyed"
+    ]);
+  });
 });
 
 describe("destroy method", () => {
@@ -278,6 +321,8 @@ describe("destroy method", () => {
     expect(document.contains(widget.el)).toBe(true);
     widget.destroy();
     expect(document.contains(widget.el)).toBe(false);
+    expect(widget.__widget__.isMounted).toBe(false);
+    expect(widget.__widget__.isDestroyed).toBe(true);
   });
 
   test("destroying a widget twice only call destroyed once", async () => {