allow non alphanumeric dynamic attributes in qweb

web/static/src/ts/core/qweb_vdom.ts

@@ -384,9 +384,13 @@ export class QWeb {
 
       // dynamic attributes
       if (name.startsWith("t-att-")) {
-        const attName = name.slice(6);
+        let attName = name.slice(6);
         const formattedValue = this._formatExpression(ctx.getValue(value!));
         const attID = ctx.generateID();
+        if (!attName.match(/^[a-zA-Z]+$/)) {
+          // attribute contains 'non letters' => we want to quote it
+          attName = '"' + attName + '"';
+        }
         ctx.addLine(`let _${attID} = ${formattedValue};`);
         attrs.push(`${attName}: _${attID}`);
       }

web/static/tests/core/__snapshots__/qweb_vdom.test.ts.snap

@@ -11,6 +11,17 @@ exports[`attributes dynamic attribute falsy variable  1`] = `
 }"
 `;
 
+exports[`attributes dynamic attribute with a dash 1`] = `
+"function anonymous(context,extra
+) {
+    let h = this.h;
+    let _1 = context['id'];
+    let c2 = [], p2 = {attrs:{\\"data-action-id\\": _1}};
+    let vn2 = h('div', p2, c2);
+    return vn2;
+}"
+`;
+
 exports[`attributes dynamic attributes 1`] = `
 "function anonymous(context,extra
 ) {
@@ -481,7 +492,7 @@ exports[`misc global 1`] = `
         c1.push({text: \`
           \`});
         let _7 = 'agüero';
-        let c8 = [], p8 = {attrs:{falló: _7}};
+        let c8 = [], p8 = {attrs:{\\"falló\\": _7}};
         let vn8 = h('Año', p8, c8);
         c1.push(vn8);
         c8.push({text: \`

web/static/tests/core/qweb_vdom.test.ts

@@ -309,6 +309,12 @@ describe("attributes", () => {
     expect(result).toBe(`<div foo="bar"></div>`);
   });
 
+  test("dynamic attribute with a dash", () => {
+    qweb.addTemplate("test", `<div t-att-data-action-id="id"/>`);
+    const result = renderToString(qweb, "test", { id: 32 });
+    expect(result).toBe(`<div data-action-id="32"></div>`);
+  });
+
   test("fixed variable", () => {
     qweb.addTemplate("test", `<div t-att-foo="value"/>`);
     const result = renderToString(qweb, "test", { value: "ok" });