[FIX] components: only call handlers if component is mounted

src/component/handler.ts

@@ -1,4 +1,5 @@
 import { filterOutModifiersFromData } from "../blockdom/config";
+import { STATUS } from "./status";
 
 export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarget | null) => {
   const { data: _data, modifiers } = filterOutModifiersFromData(data);
@@ -30,7 +31,10 @@ export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarg
   // We check this rather than data[0] being truthy (or typeof function) so that it crashes
   // as expected when there is a handler expression that evaluates to a falsy value
   if (Object.hasOwnProperty.call(data, 0)) {
-    data[0].call(data[1] ? data[1].__owl__.component : null, ev);
+    let node = data[1] ? data[1].__owl__ : null;
+    if (node ? node.status === STATUS.MOUNTED : true) {
+      data[0].call(node ? node.component : null, ev);
+    }
   }
   return stopped;
 };

tests/compiler/event_handling.test.ts

@@ -2,6 +2,7 @@ import { TemplateSet } from "../../src/app/template_set";
 import { mount } from "../../src/blockdom";
 import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
 import { markup } from "../../src/utils";
+import { STATUS } from "../../src/component/status";
 
 snapshotEverything();
 // -----------------------------------------------------------------------------
@@ -11,7 +12,7 @@ snapshotEverything();
 describe("t-on", () => {
   function mountToFixture(template: string, ctx: any = {}, node?: any): HTMLDivElement {
     if (!node) {
-      node = { component: ctx };
+      node = { component: ctx, status: STATUS.MOUNTED };
       ctx.__owl__ = node;
     }
     const block = renderToBdom(template, ctx, node);
@@ -156,7 +157,7 @@ describe("t-on", () => {
         expect(this).toBe(owner);
       },
     };
-    const node = { component: owner };
+    const node = { component: owner, status: STATUS.MOUNTED };
     owner.__owl__ = node;
     const fixture = makeTestFixture();
     const render = context.getTemplate("main");
@@ -181,7 +182,7 @@ describe("t-on", () => {
         expect(this).toBe(owner);
       },
     };
-    const node = { component: owner };
+    const node = { component: owner, status: STATUS.MOUNTED };
     owner.__owl__ = node;
     const fixture = makeTestFixture();
     const render = context.getTemplate("main");
@@ -260,7 +261,7 @@ describe("t-on", () => {
         expect(this).toBe(owner);
       },
     };
-    const node = { component: owner };
+    const node = { component: owner, status: STATUS.MOUNTED };
     owner.__owl__ = node;
 
     const fixture = makeTestFixture();
@@ -286,7 +287,7 @@ describe("t-on", () => {
       value: 444,
     };
 
-    const node = { component: owner };
+    const node = { component: owner, status: STATUS.MOUNTED };
     owner.__owl__ = node;
 
     const fixture = makeTestFixture();

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

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`event handling handler is not called if component is destroyed 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span block-handler-0=\\"click\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['click'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
 exports[`event handling handler receive the event as argument 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -29,6 +43,37 @@ exports[`event handling handler receive the event as argument 2`] = `
 }"
 `;
 
+exports[`event handling input blur event is not called if component is destroyed 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/><textarea/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].cond) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`event handling input blur event is not called if component is destroyed 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-handler-0=\\"blur\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['blur'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
 exports[`event handling objects from scope are properly captured by t-on 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/event_handling.test.ts

@@ -1,5 +1,5 @@
-import { makeTestFixture, snapshotEverything, nextTick } from "../helpers";
-import { mount, Component, useState, xml } from "../../src/index";
+import { makeTestFixture, snapshotEverything, nextTick, logStep, nextMicroTick } from "../helpers";
+import { mount, Component, useState, xml, App } from "../../src/index";
 
 snapshotEverything();
 
@@ -93,4 +93,60 @@ describe("event handling", () => {
     expect(onClickArgs![0]).toBe(1);
     expect(onClickArgs![1]).toBeInstanceOf(MouseEvent);
   });
+
+  test("handler is not called if component is destroyed", async () => {
+    class Parent extends Component {
+      static template = xml`<span t-on-click="click"/>`;
+      click() {
+        logStep("click");
+      }
+    }
+
+    const app = new App(Parent);
+    await app.mount(fixture);
+    const span = fixture.querySelector("span")!;
+
+    span.click();
+    expect(["click"]).toBeLogged();
+
+    app.destroy();
+    expect([]).toBeLogged();
+
+    span.click();
+    expect([]).toBeLogged();
+  });
+
+  test("input blur event is not called if component is destroyed", async () => {
+    class Child extends Component {
+      static template = xml`<input t-on-blur="blur"/>`;
+
+      blur() {
+        logStep("blur");
+      }
+    }
+    class Parent extends Component {
+      static template = xml`
+      <div>
+        <t t-if="state.cond"><Child/></t>
+        <textarea/>
+      </div>`;
+      static components = { Child };
+
+      state = useState({ cond: true });
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    fixture.querySelector("input")!.focus();
+    await nextMicroTick();
+    // to unfocus input
+    fixture.querySelector("textarea")!.focus();
+    expect(["blur"]).toBeLogged();
+
+    fixture.querySelector("input")!.focus();
+    parent.state.cond = false;
+    await nextTick();
+    // input is removed when component is destroyed => nothing should happen
+    expect([]).toBeLogged();
+  });
 });