[IMP] qweb, blockdom, components: t-on with modifiers

supported modifiers: capture, prevent, stop, self.

tests/blockdom/block_event_handling.test.ts

@@ -61,6 +61,7 @@ test("simple event handling ", async () => {
       const [owner, method] = data;
       owner[method]();
     }
+    return false;
   };
 
   const block = createBlock('<div block-handler-0="click"></div>');

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

@@ -98,7 +98,7 @@ exports[`basics can be clicked on and updated 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let d1 = ctx['state'].counter;
     const v1 = ctx['state'];
-    let d2 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
+    let d2 = [(e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }}];
     return block1([d1, d2]);
   }
 }"
@@ -598,7 +598,7 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let d1 = ctx['state'].counter;
     const v1 = ctx['state'];
-    let d2 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
+    let d2 = [(e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }}];
     return block1([d1, d2]);
   }
 }"

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

@@ -42,7 +42,7 @@ exports[`event handling support for callable expression in event handler 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let d1 = ctx['state'].value;
     const v1 = ctx['obj'];
-    let d2 = (e) => {const res = (() => { return v1.onInput })(); if (typeof res === 'function') { res(e) }};
+    let d2 = [(e) => {const res = (() => { return v1.onInput })(); if (typeof res === 'function') { res(e) }}];
     return block1([d1, d2]);
   }
 }"

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

@@ -137,7 +137,7 @@ exports[`t-component modifying a sub widget 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let d1 = ctx['state'].counter;
     const v1 = ctx['state'];
-    let d2 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
+    let d2 = [(e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }}];
     return block1([d1, d2]);
   }
 }"

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

@@ -20,7 +20,7 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
       let key1 = ctx['val'];
       const v1 = ctx['otherState'];
       const v2 = ctx['iter'];
-      let d1 = (e) => {const res = (() => { return v1.vals.push(v2+'_'+v2) })(); if (typeof res === 'function') { res(e) }};
+      let d1 = [(e) => {const res = (() => { return v1.vals.push(v2+'_'+v2) })(); if (typeof res === 'function') { res(e) }}];
       setContextValue(ctx, \\"iter\\", ctx['iter']+1);
       c_block2[i1] = withKey(block3([d1]), key1);
     }
@@ -50,7 +50,7 @@ exports[`t-on t-on expression in t-foreach 1`] = `
       let d2 = ctx['val']+'';
       const v1 = ctx['otherState'];
       const v2 = ctx['val'];
-      let d3 = (e) => {const res = (() => { return v1.vals.push(v2) })(); if (typeof res === 'function') { res(e) }};
+      let d3 = [(e) => {const res = (() => { return v1.vals.push(v2) })(); if (typeof res === 'function') { res(e) }}];
       c_block2[i1] = withKey(block3([d1, d2, d3]), key1);
     }
     let b2 = list(c_block2);
@@ -84,7 +84,7 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
       const v1 = ctx['otherState'];
       const v2 = ctx['val'];
       const v3 = ctx['bossa'];
-      let d3 = (e) => {const res = (() => { return v1.vals.push(v2+'_'+v3) })(); if (typeof res === 'function') { res(e) }};
+      let d3 = [(e) => {const res = (() => { return v1.vals.push(v2+'_'+v3) })(); if (typeof res === 'function') { res(e) }}];
       c_block2[i1] = withKey(block3([d1, d2, d3]), key1);
     }
     let b2 = list(c_block2);

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

@@ -256,6 +256,158 @@ exports[`t-on t-on modifiers (native listener) basic support for native listener
 }"
 `;
 
+exports[`t-on t-on modifiers (native listener) t-on combined with t-esc 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-text-1/></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'onClick'];
+    let d2 = ctx['text'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on combined with t-raw 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-child-0/></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'onClick'];
+    let b2 = html(ctx['html']);
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [\\"capture\\", ctx, 'onCapture'];
+    let d2 = [ctx, 'doSomething'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with empty handler (only modifiers) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [\\"prevent\\", (e) => {const res = (() => { return  })(); if (typeof res === 'function') { res(e) }}];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifiers (order matters) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [\\"prevent\\",\\"self\\", ctx, 'onClick'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop modifiers 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button 1</button><button block-handler-1=\\"click.stop\\">Button 2</button><button block-handler-2=\\"click.prevent.stop\\">Button 3</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [\\"prevent\\", ctx, 'onClickPrevented'];
+    let d2 = [\\"stop\\", ctx, 'onClickStopped'];
+    let d3 = [\\"prevent\\",\\"stop\\", ctx, 'onClickPreventedAndStopped'];
+    return block1([d1, d2, d3]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-foreach 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<a href=\\"#\\" block-handler-0=\\"click.prevent\\"> Edit <block-text-1/></a>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`project\`] = v_block2[i1];
+      let key1 = ctx['project'];
+      const arg1 = [ctx['project'].id];
+      let d1 = [\\"prevent\\", ctx, 'onEdit', arg1];
+      let d2 = ctx['project'].name;
+      c_block2[i1] = withKey(block3([d1, d2]), key1);
+    }
+    let b2 = list(c_block2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifiers (order matters) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [\\"self\\",\\"prevent\\", ctx, 'onClick'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'onClick'];
+    let d2 = [\\"self\\", ctx, 'onClickSelf'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
 exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -265,8 +417,8 @@ exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`
   let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = [ctx, 'divClicked'];
-    let d2 = [ctx, 'btnClicked'];
+    let d1 = [\\"synthetic\\", ctx, 'divClicked'];
+    let d2 = [\\"synthetic\\", ctx, 'btnClicked'];
     return block1([d1, d2]);
   }
 }"
@@ -282,7 +434,7 @@ exports[`t-on t-on with inline statement (function call) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['state'];
-    let d1 = (e) => {const res = (() => { return v1.incrementCounter(2) })(); if (typeof res === 'function') { res(e) }};
+    let d1 = [(e) => {const res = (() => { return v1.incrementCounter(2) })(); if (typeof res === 'function') { res(e) }}];
     return block1([d1]);
   }
 }"
@@ -298,7 +450,7 @@ exports[`t-on t-on with inline statement 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['state'];
-    let d1 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
+    let d1 = [(e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }}];
     return block1([d1]);
   }
 }"
@@ -314,7 +466,7 @@ exports[`t-on t-on with inline statement, part 2 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['state'];
-    let d1 = (e) => {const res = (() => { return v1.flag=!v1.flag })(); if (typeof res === 'function') { res(e) }};
+    let d1 = [(e) => {const res = (() => { return v1.flag=!v1.flag })(); if (typeof res === 'function') { res(e) }}];
     return block1([d1]);
   }
 }"
@@ -331,7 +483,7 @@ exports[`t-on t-on with inline statement, part 3 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['state'];
     const v2 = ctx['someFunction'];
-    let d1 = (e) => {const res = (() => { return v1.n=v2(3) })(); if (typeof res === 'function') { res(e) }};
+    let d1 = [(e) => {const res = (() => { return v1.n=v2(3) })(); if (typeof res === 'function') { res(e) }}];
     return block1([d1]);
   }
 }"

tests/qweb/event_handling.test.ts

@@ -326,6 +326,217 @@ describe("t-on", () => {
       button.click();
       expect(steps).toEqual(["btnClicked", "divClicked"]);
     });
+
+  test("t-on with prevent and/or stop modifiers", async () => {
+      expect.assertions(7);
+      const template = `<div>
+      <button t-on-click.prevent="onClickPrevented">Button 1</button>
+      <button t-on-click.stop="onClickStopped">Button 2</button>
+      <button t-on-click.prevent.stop="onClickPreventedAndStopped">Button 3</button>
+      </div>`;
+
+      let owner = {
+        onClickPrevented(e: Event) {
+          expect(e.defaultPrevented).toBe(true);
+          expect(e.cancelBubble).toBe(false);
+        },
+        onClickStopped(e: Event) {
+          expect(e.defaultPrevented).toBe(false);
+          expect(e.cancelBubble).toBe(true);
+        },
+        onClickPreventedAndStopped(e: Event) {
+          expect(e.defaultPrevented).toBe(true);
+          expect(e.cancelBubble).toBe(true);
+        },
+      };
+
+      const node = mountToFixture(template, owner);
+
+      const buttons = (<HTMLElement>node).getElementsByTagName("button");
+      buttons[0].click();
+      buttons[1].click();
+      buttons[2].click();
+    });
+
+    test("t-on with self modifier", async () => {
+      expect.assertions(2);
+      const template = `<div>
+        <button t-on-click="onClick"><span>Button</span></button>
+        <button t-on-click.self="onClickSelf"><span>Button</span></button>
+      </div>`;
+      let steps: string[] = [];
+      let owner = {
+        onClick(e: Event) {
+          steps.push("onClick");
+        },
+        onClickSelf(e: Event) {
+          steps.push("onClickSelf");
+        },
+      };
+      const node = mountToFixture(template, owner);
+
+      const buttons = (<HTMLElement>node).getElementsByTagName("button");
+      const spans = (<HTMLElement>node).getElementsByTagName("span");
+      spans[0].click();
+      spans[1].click();
+      buttons[0].click();
+      buttons[1].click();
+
+      expect(steps).toEqual(["onClick", "onClick", "onClickSelf"]);
+    });
+
+    test("t-on with self and prevent modifiers (order matters)", async () => {
+      expect.assertions(2);
+      const template = `<div>
+        <button t-on-click.self.prevent="onClick"><span>Button</span></button>
+      </div>`;
+      let steps: boolean[] = [];
+      let owner = {
+        onClick() {},
+      };
+      const node = mountToFixture(template, owner);
+      (<HTMLElement>node).addEventListener("click", function (e) {
+        steps.push(e.defaultPrevented);
+      });
+
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      const span = (<HTMLElement>node).getElementsByTagName("span")[0];
+      span.click();
+      button.click();
+
+      expect(steps).toEqual([false, true]);
+    });
+
+    test("t-on with prevent and self modifiers (order matters)", async () => {
+      expect.assertions(2);
+      const template = `<div>
+        <button t-on-click.prevent.self="onClick"><span>Button</span></button>
+      </div>`;
+      let steps: boolean[] = [];
+      let owner = {
+        onClick() {},
+      };
+      const node = mountToFixture(template, owner);
+      (<HTMLElement>node).addEventListener("click", function (e) {
+        steps.push(e.defaultPrevented);
+      });
+
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      const span = (<HTMLElement>node).getElementsByTagName("span")[0];
+      span.click();
+      button.click();
+
+      expect(steps).toEqual([true, true]);
+    });
+
+    test("t-on with prevent modifier in t-foreach", async () => {
+      expect.assertions(5);
+      const template = `<div>
+        <t t-foreach="projects" t-as="project" t-key="project">
+          <a href="#" t-on-click.prevent="onEdit(project.id)">
+            Edit <t t-esc="project.name"/>
+          </a>
+        </t>
+      </div>`;
+      const steps: string[] = [];
+      const owner = {
+        projects: [
+          { id: 1, name: "Project 1" },
+          { id: 2, name: "Project 2" },
+        ],
+
+        onEdit(projectId: string, ev: Event) {
+          expect(ev.defaultPrevented).toBe(true);
+          steps.push(projectId);
+        },
+      };
+
+      const node = mountToFixture(template, owner);
+      expect(node.innerHTML).toBe(
+        `<div><a href="#"> Edit Project 1</a><a href="#"> Edit Project 2</a></div>`
+      );
+
+      const links = node.querySelectorAll("a")!;
+      links[0].click();
+      links[1].click();
+
+      expect(steps).toEqual([1, 2]);
+    });
+
+    test("t-on with empty handler (only modifiers)", () => {
+      expect.assertions(2);
+      const template = `<div>
+        <button t-on-click.prevent="">Button</button>
+      </div>`;
+      const node = mountToFixture(template, {});
+
+      node.addEventListener("click", (e) => {
+        expect(e.defaultPrevented).toBe(true);
+      });
+
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      button.click();
+    });
+
+    test("t-on combined with t-esc", async () => {
+      expect.assertions(3);
+      const template = `<div><button t-on-click="onClick" t-esc="text"/></div>`;
+      const steps: string[] = [];
+      const owner = {
+        text: "Click here",
+        onClick() {
+          steps.push("onClick");
+        },
+      };
+
+      const node = mountToFixture(template, owner);
+      expect(node.innerHTML).toBe(`<div><button>Click here</button></div>`);
+
+      node.querySelector("button")!.click();
+
+      expect(steps).toEqual(["onClick"]);
+    });
+
+    test("t-on combined with t-raw", async () => {
+      expect.assertions(3);
+      const template = `<div><button t-on-click="onClick" t-raw="html"/></div>`;
+      const steps: string[] = [];
+      const owner = {
+        html: "Click <b>here</b>",
+        onClick() {
+          steps.push("onClick");
+        },
+      };
+
+      const node = mountToFixture(template, owner);
+      expect(node.innerHTML).toBe(`<div><button>Click <b>here</b></button></div>`);
+
+      node.querySelector("button")!.click();
+
+      expect(steps).toEqual(["onClick"]);
+    });
+
+    test("t-on with .capture modifier", () => {
+      expect.assertions(2);
+      const template = `<div t-on-click.capture="onCapture">
+        <button t-on-click="doSomething">Button</button>
+      </div>`;
+
+      const steps: string[] = [];
+      const owner = {
+        onCapture() {
+          steps.push("captured");
+        },
+        doSomething() {
+          steps.push("normal");
+        },
+      };
+      const node = mountToFixture(template, owner);
+
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      button.click();
+      expect(steps).toEqual(["captured", "normal"]);
+    });
   });
 
   describe("t-on modifiers (synthetic listener)", () => {