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()