From 63fbcf99fd588c76ad095fe14a1db1a404ad8ef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Mon, 13 Dec 2021 14:41:07 +0100
Subject: [PATCH] [FIX] blockdom: ignore attributes with undefined value

---
 src/blockdom/attributes.ts                    |  2 +-
 tests/blockdom/block_attributes.test.ts       |  8 ++++++
 .../__snapshots__/attributes.test.ts.snap     | 28 +++++++++++++++++++
 tests/compiler/attributes.test.ts             | 12 ++++++++
 4 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/blockdom/attributes.ts b/src/blockdom/attributes.ts
index 6ca49ed7..b4e50760 100644
--- a/src/blockdom/attributes.ts
+++ b/src/blockdom/attributes.ts
@@ -16,7 +16,7 @@ const wordRegexp = /\s+/;
 
 export function createAttrUpdater(attr: string): Setter<HTMLElement> {
   return function (this: HTMLElement, value: any) {
-    if (value !== false) {
+    if (value !== false && value !== undefined) {
       setAttribute.call(this, attr, value === true ? "" : value);
     }
   };
diff --git a/tests/blockdom/block_attributes.test.ts b/tests/blockdom/block_attributes.test.ts
index 0f15f8bb..fa015e1e 100644
--- a/tests/blockdom/block_attributes.test.ts
+++ b/tests/blockdom/block_attributes.test.ts
@@ -65,6 +65,14 @@ test("class attribute", async () => {
   expect(fixture.innerHTML).toBe(`<div class="0"></div>`);
 });
 
+test("attribute with undefined value", async () => {
+  const block = createBlock('<div block-attribute-0="abc"></div>');
+  const tree = block([undefined]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe(`<div></div>`);
+});
+
 test("class attribute with undefined value", async () => {
   const block = createBlock('<div block-attribute-0="class"></div>');
   const tree = block([undefined]);
diff --git a/tests/compiler/__snapshots__/attributes.test.ts.snap b/tests/compiler/__snapshots__/attributes.test.ts.snap
index f509a8fc..755d3d6f 100644
--- a/tests/compiler/__snapshots__/attributes.test.ts.snap
+++ b/tests/compiler/__snapshots__/attributes.test.ts.snap
@@ -182,6 +182,34 @@ exports[`attributes dynamic formatted attributes with a dash 1`] = `
 }"
 `;
 
+exports[`attributes dynamic undefined class attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['c'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic undefined generic attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"thing\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['c'];
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`attributes fixed variable 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/compiler/attributes.test.ts b/tests/compiler/attributes.test.ts
index d1f67410..6157d733 100644
--- a/tests/compiler/attributes.test.ts
+++ b/tests/compiler/attributes.test.ts
@@ -52,6 +52,18 @@ describe("attributes", () => {
     expect(result).toBe(`<div></div>`);
   });
 
+  test("dynamic undefined generic attribute", () => {
+    const template = `<div t-att-thing="c"/>`;
+    const result = renderToString(template, { c: undefined });
+    expect(result).toBe(`<div></div>`);
+  });
+
+  test("dynamic undefined class attribute", () => {
+    const template = `<div t-att-class="c"/>`;
+    const result = renderToString(template, { c: undefined });
+    expect(result).toBe(`<div></div>`);
+  });
+
   test("dynamic attribute with a dash", () => {
     const template = `<div t-att-data-action-id="id"/>`;
     const result = renderToString(template, { id: 32 });