[FIX] qweb: event modifier with arg in t-foreach

Closes #266

src/qweb/extensions.ts

@@ -49,25 +49,35 @@ QWeb.addDirective({
     );
     ctx.closeIf();
     let params = extraArgs ? `owner, ${ctx.formatExpression(extraArgs)}` : "owner";
-    let handler;
     if (mods.length > 0) {
-      handler = `function (e) {`;
+      let handler = `function (e) {`;
       handler += mods
         .map(function(mod) {
           return MODS_CODE[mod];
         })
         .join("");
-      handler += `context['${handlerName}'].call(${params}, e);}`;
+      if (!extraArgs) {
+        handler += `context['${handlerName}'].call(${params}, e);}`;
+        ctx.addLine(
+          `extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || ${handler};`
+        );
+        ctx.addLine(`p${nodeID}.on['${eventName}'] = extra.handlers['${eventName}' + ${nodeID}];`);
+      } else {
+        const handlerKey = `handler${ctx.generateID()}`;
+        ctx.addLine(`const ${handlerKey} = context['${handlerName}'].bind(${params});`);
+        handler += `${handlerKey}(e);}`;
+        ctx.addLine(`p${nodeID}.on['${eventName}'] = ${handler};`);
+      }
     } else {
-      handler = `context['${handlerName}'].bind(${params})`;
+      const handler = `context['${handlerName}'].bind(${params})`;
-    }
+      if (extraArgs) {
-    if (extraArgs) {
+        ctx.addLine(`p${nodeID}.on['${eventName}'] = ${handler};`);
-      ctx.addLine(`p${nodeID}.on['${eventName}'] = ${handler};`);
+      } else {
-    } else {
+        ctx.addLine(
-      ctx.addLine(
+          `extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || ${handler};`
-        `extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || ${handler};`
+        );
-      );
+        ctx.addLine(`p${nodeID}.on['${eventName}'] = extra.handlers['${eventName}' + ${nodeID}];`);
-      ctx.addLine(`p${nodeID}.on['${eventName}'] = extra.handlers['${eventName}' + ${nodeID}];`);
+      }
     }
   }
 });
@@ -197,7 +207,9 @@ QWeb.addDirective({
     );
     ctx.addIf(`slot${slotKey}`);
     ctx.addLine(
-      `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, vars: extra.vars, parent: owner}));`
+      `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c${
+        ctx.parentNode
+      }, vars: extra.vars, parent: owner}));`
     );
     ctx.closeIf();
     return true;

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

@@ -1764,6 +1764,49 @@ exports[`t-on t-on with prevent and/or stop modifiers 1`] = `
 }"
 `;
 
+exports[`t-on t-on with prevent modifier in t-foreach 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    context = Object.create(context);
+    var h = this.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    result = vn1;
+    var _2 = context['projects'];
+    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
+    var _3 = _4 = _2;
+    if (!(_2 instanceof Array)) {
+        _3 = Object.keys(_2);
+        _4 = Object.values(_2);
+    }
+    var _length3 = _3.length;
+    for (let i = 0; i < _length3; i++) {
+        context.project_first = i === 0;
+        context.project_last = i === _length3 - 1;
+        context.project_index = i;
+        context.project = _3[i];
+        context.project_value = _4[i];
+        var _5 = '#';
+        const nodeKey6 = context['project']
+        let c6 = [], p6 = {key:nodeKey6,attrs:{href: _5},on:{}};
+        var vn6 = h('a', p6, c6);
+        c1.push(vn6);
+        if (!context['onEdit']) {
+            throw new Error('Missing handler \\\\'' + 'onEdit' + \`\\\\' when evaluating template 'test'\`)
+        }
+        const handler7 = context['onEdit'].bind(owner, context['project'].id);
+        p6.on['click'] = function (e) {e.preventDefault();handler7(e);};
+        c6.push({text: \` Edit \`});
+        var _8 = context['project'].name;
+        if (_8 || _8 === 0) {
+            c6.push({text: _8});
+        }
+    }
+    return vn1;
+}"
+`;
+
 exports[`t-on t-on with self and prevent modifiers (order matters) 1`] = `
 "function anonymous(context,extra
 ) {

tests/qweb/qweb.test.ts

@@ -1086,6 +1086,38 @@ describe("t-on", () => {
 
     expect(steps).toEqual([true, true]);
   });
+
+  test("t-on with prevent modifier in t-foreach", async () => {
+    expect.assertions(5);
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <t t-foreach="projects" t-as="project">
+          <a href="#" t-key="project" 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, ev) {
+        expect(ev.defaultPrevented).toBe(true);
+        steps.push(projectId);
+      },
+    };
+
+    const node = <HTMLElement>renderToDOM(qweb, "test", owner, { handlers: [] });
+    expect(node.outerHTML).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]);
+  });
 });
 
 describe("t-ref", () => {