fix issue with subwidgets not being mounted/unmounted

web/static/src/ts/widgets/Action.ts

@@ -11,10 +11,6 @@ export class Action extends Widget<Env, Props> {
   template = `<div class="o_content"/>`;
   currentWidget: any;
 
-  mounted() {
-    this.setContentWidget();
-  }
-
   shouldUpdate(nextProps: Props) {
     if (nextProps.stack !== this.props.stack) {
       this.props = nextProps;

web/static/src/ts/widgets/Discuss.ts

@@ -22,31 +22,16 @@ const template = `
         <t t-widget="ColorWidget" t-props="{color: state.color}"/>
         <button t-on-click="addNotif(false)">Add notif</button>
         <button t-on-click="addNotif(true)">Add sticky notif</button>
-        <t t-foreach="state.test" t-as="number">
-            <t t-widget="ChildWidget" t-key="number"/>
-        </t>
 
     </div>
 `;
 
-let n = 1;
-class ChildWidget extends Widget<Env, never> {
-  name = "c";
-  template = `<span><t t-esc="state.n"/></span>`;
-  constructor(parent) {
-    super(parent);
-    this.state = { n };
-    n++;
-  }
-}
-
 export class Discuss extends Widget<Env, {}> {
   name = "discuss";
   template = template;
-  widgets = { Clock, Counter, ColorWidget, ChildWidget };
-  state = { validcounter: true, color: "red", test: [1, 2, 3] };
+  widgets = { Clock, Counter, ColorWidget };
+  state = { validcounter: true, color: "red" };
 
-  mounted() {}
   resetCounter(ev: MouseEvent) {
     if (this.refs.counter instanceof Counter) {
       this.refs.counter.updateState({ counter: 3 });

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

@@ -1,31 +1,34 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-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;
+  template = `<div class="o_clock"><t t-esc="state.currentTime"/></div>`;
+  timeout: any | undefined;
 
   state = {
     currentTime: ""
   };
 
-  async willStart() {
-    this.updateTime();
-  }
-
   mounted() {
-    this.interval = setInterval(this.updateTime.bind(this), 500);
+    this.updateTime();
+    this.startClock();
   }
 
   willUnmount() {
-    clearInterval(this.interval);
+    clearTimeout(this.timeout);
   }
+
   updateTime() {
-    this.updateState({
-      currentTime: new Date().toLocaleTimeString()
-    });
+    this.updateState({ currentTime: new Date().toLocaleTimeString() });
+  }
+
+  startClock() {
+    const now = Date.now();
+    const offset = 1000 - (now % 1000);
+    this.timeout = setTimeout(() => {
+      this.updateTime();
+      this.startClock();
+    }, offset);
   }
 }