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

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();
+  });
 });