[FIX] compiler: dynamic value on inputs doesn't turn 0 into empty string

In #1161, we fixed blockdom treating 0 as falsy when patching a value,
which would result in an empty attribute. It turns out that there is
another place where we had the same fallback, which is when we compute a
dynamic attribute value, so while blockdom had the ability to set the
value to 0, when using a dynamic attribute value we would never give it
0 as a value. This commit changes the fallback strategy for dynamic
attribute values to be the same as the one in blockdom.

closes #1358

src/compiler/code_generator.ts

@@ -580,8 +580,8 @@ export class CodeGenerator {
         if (attrName && isProp(ast.tag, attrName)) {
           // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
           if (attrName === "value") {
-            // When the expression is falsy, fall back to an empty string
-            expr = `new String((${expr}) || "")`;
+            // When the expression is falsy (except 0), fall back to an empty string
+            expr = `new String((${expr}) === 0 ? 0 : ((${expr}) || ""))`;
           } else {
             expr = `new Boolean(${expr})`;
           }

tests/compiler/__snapshots__/attributes.test.ts.snap

@@ -238,6 +238,62 @@ exports[`attributes dynamic formatted attributes with a dash 1`] = `
 }"
 `;
 
+exports[`attributes dynamic input value: falsy values 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String((0) === 0 ? 0 : ((0) || \\"\\"));
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic input value: falsy values 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String((false) === 0 ? 0 : ((false) || \\"\\"));
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic input value: falsy values 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String((undefined) === 0 ? 0 : ((undefined) || \\"\\"));
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic input value: falsy values 4`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String(('') === 0 ? 0 : (('') || \\"\\"));
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes dynamic undefined class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -729,7 +785,7 @@ exports[`attributes updating property with falsy value 1`] = `
   let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
+    let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
     return block1([attr1]);
   }
 }"
@@ -800,7 +856,7 @@ exports[`special cases for some specific html attributes/properties input with t
   let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
+    let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
     return block1([attr1]);
   }
 }"
@@ -814,7 +870,7 @@ exports[`special cases for some specific html attributes/properties input with t
   let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
+    let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
     return block1([attr1]);
   }
 }"
@@ -842,7 +898,7 @@ exports[`special cases for some specific html attributes/properties select with
   let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['value']) || \\"\\");
+    let attr1 = new String((ctx['value']) === 0 ? 0 : ((ctx['value']) || \\"\\"));
     return block1([attr1]);
   }
 }"
@@ -856,7 +912,7 @@ exports[`special cases for some specific html attributes/properties textarea wit
   let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
+    let attr1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
     return block1([attr1]);
   }
 }"

tests/compiler/__snapshots__/misc.test.ts.snap

@@ -277,7 +277,7 @@ exports[`misc other complex template 1`] = `
       const b15 = list(c_block15);
       b14 = block14([], [b15]);
     }
-    let attr8 = new String((ctx['search'].value) || \\"\\");
+    let attr8 = new String((ctx['search'].value) === 0 ? 0 : ((ctx['search'].value) || \\"\\"));
     let hdlr4 = [ctx['updateFilter'], ctx];
     let hdlr5 = [ctx['updateFilter'], ctx];
     let hdlr6 = [ctx['clearSearch'], ctx];

tests/compiler/attributes.test.ts

@@ -334,6 +334,14 @@ describe("attributes", () => {
     expect(fixture.innerHTML).toBe('<div value=""></div>');
   });
 
+  test("dynamic input value: falsy values", () => {
+    // 0 doesn't fall back to empty string
+    expect(renderToBdom(`<input t-att-value="0"/>`)).toEqual({ data: [new String("0")] });
+    expect(renderToBdom(`<input t-att-value="false"/>`)).toEqual({ data: [new String("")] });
+    expect(renderToBdom(`<input t-att-value="undefined"/>`)).toEqual({ data: [new String("")] });
+    expect(renderToBdom(`<input t-att-value="''"/>`)).toEqual({ data: [new String("")] });
+  });
+
   test("updating property with falsy value", async () => {
     // render input with initial value
     const template = `<input t-att-value="v"></input>`;

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

@@ -585,7 +585,7 @@ exports[`t-model directive t-model with radio button group in t-foreach 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`opt\`] = v_block2[i1];
       const key1 = ctx['opt'];
-      let attr1 = new String((ctx['opt']) || \\"\\");
+      let attr1 = new String((ctx['opt']) === 0 ? 0 : ((ctx['opt']) || \\"\\"));
       let attr2 = ctx['opt'];
       const bExpr1 = ctx['state'];
       const expr1 = 'group';