From 0983ff0d24926fd6a5e29f9a4a9e235b4790b520 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Mon, 4 Mar 2019 11:24:35 +0100
Subject: [PATCH] allow static and dynamic attributes to combine in qweb

---
 web/static/src/ts/core/qweb_vdom.ts                 | 10 +++++++++-
 web/static/src/xml/templates.xml                    |  4 ++--
 .../tests/core/__snapshots__/qweb_vdom.test.ts.snap | 13 +++++++++++++
 web/static/tests/core/qweb_vdom.test.ts             |  6 ++++++
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/web/static/src/ts/core/qweb_vdom.ts b/web/static/src/ts/core/qweb_vdom.ts
index 503109f2..49b41a07 100644
--- a/web/static/src/ts/core/qweb_vdom.ts
+++ b/web/static/src/ts/core/qweb_vdom.ts
@@ -406,12 +406,20 @@ export class QWeb {
       // dynamic attributes
       if (name.startsWith("t-att-")) {
         let attName = name.slice(6);
-        const formattedValue = this._formatExpression(ctx.getValue(value!));
+        let 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 + '"';
         }
+        // we need to combine dynamic with non dynamic attributes:
+        // class="a" t-att-class="'yop'" should be rendered as class="a yop"
+        const attValue = (<Element>node).getAttribute(attName);
+        if (attValue) {
+          const attValueID = ctx.generateID();
+          ctx.addLine(`let _${attValueID} = ${formattedValue};`);
+          formattedValue = `'${attValue}' + (_${attValueID} ? ' ' + _${attValueID} : '')`;
+        }
         ctx.addLine(`let _${attID} = ${formattedValue};`);
         attrs.push(`${attName}: _${attID}`);
       }
diff --git a/web/static/src/xml/templates.xml b/web/static/src/xml/templates.xml
index aa228409..f5579cc5 100644
--- a/web/static/src/xml/templates.xml
+++ b/web/static/src/xml/templates.xml
@@ -11,8 +11,8 @@
     <div class="o_loading d-none" t-ref="loading_indicator">Loading</div>
   </div>
 
-  <div t-name="web.navbar" class="o_navbar" t-att-class="props.inHome ? 'o_navbar o_in_home' : 'o_navbar'">
-    <a aria-label="Applications" t-if="!props.inHome || props.app" t-att-class="props.inHome ? 'o_title fa fa-chevron-left' : 'o_title fa fa-th'" href="#" title="Applications" accesskey="h" t-on-click="toggleHome"/>
+  <div t-name="web.navbar" class="o_navbar" t-att-class="props.inHome ? 'o_in_home' : ''">
+    <a aria-label="Applications" t-if="!props.inHome || props.app" class="o_title fa" t-att-class="props.inHome ? 'fa-chevron-left' : 'fa-th'" href="#" title="Applications" accesskey="h" t-on-click="toggleHome"/>
     <t t-if="!props.inHome &amp;&amp; props.app">
       <a class="o_menu_brand" t-att-href="getUrl(props.app)" role="button" t-on-click="openMenu(props.app)">
         <t t-esc="props.app.name"/>
diff --git a/web/static/tests/core/__snapshots__/qweb_vdom.test.ts.snap b/web/static/tests/core/__snapshots__/qweb_vdom.test.ts.snap
index 7ac0c063..fe1e29c9 100644
--- a/web/static/tests/core/__snapshots__/qweb_vdom.test.ts.snap
+++ b/web/static/tests/core/__snapshots__/qweb_vdom.test.ts.snap
@@ -156,6 +156,19 @@ exports[`attributes static attributes with dashes 1`] = `
 }"
 `;
 
+exports[`attributes t-att-class and class should combine together 1`] = `
+"function anonymous(context,extra
+) {
+    let h = this.h;
+    let _1 = 'hello';
+    let _3 = context['value'];
+    let _2 = 'hello' + (_3 ? ' ' + _3 : '');
+    let c4 = [], p4 = {key:4,attrs:{class: _1,class: _2}};
+    let vn4 = h('div', p4, c4);
+    return vn4;
+}"
+`;
+
 exports[`attributes tuple literal 1`] = `
 "function anonymous(context,extra
 ) {
diff --git a/web/static/tests/core/qweb_vdom.test.ts b/web/static/tests/core/qweb_vdom.test.ts
index 4fcd4170..cf3a0e7d 100644
--- a/web/static/tests/core/qweb_vdom.test.ts
+++ b/web/static/tests/core/qweb_vdom.test.ts
@@ -420,6 +420,12 @@ describe("attributes", () => {
     const expected = `<div foo="&lt;foo" bar="&lt;bar&gt;" baz="&lt;&quot;&lt;baz&gt;&quot;&gt;" qux="&lt;&gt;"></div>`;
     expect(result).toBe(expected);
   });
+
+  test("t-att-class and class should combine together", () => {
+    qweb.addTemplate("test", `<div class="hello" t-att-class="value"/>`);
+    const result = renderToString(qweb, "test", { value: "world" });
+    expect(result).toBe(`<div class="hello world"></div>`);
+  });
 });
 
 describe("t-call (template calling", () => {