diff --git a/src/blockdom/attributes.ts b/src/blockdom/attributes.ts index b41a129b..d3466be9 100644 --- a/src/blockdom/attributes.ts +++ b/src/blockdom/attributes.ts @@ -139,7 +139,8 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) { export function makePropSetter(name: string): Setter { return function setProp(this: HTMLElement, value: any) { - (this as any)[name] = value || ""; + // support 0, fallback to empty string for other falsy values + (this as any)[name] = value === 0 ? 0 : value || ""; }; } diff --git a/tests/blockdom/block_attributes.test.ts b/tests/blockdom/block_attributes.test.ts index be053e35..eb468c84 100644 --- a/tests/blockdom/block_attributes.test.ts +++ b/tests/blockdom/block_attributes.test.ts @@ -169,13 +169,25 @@ describe("properties", () => { expect(input.value).toBe("potato"); }); - test("input with value attribute, and undefined given", () => { + test("input with value attribute, and falsy value given", () => { const block = createBlock(``); const tree = block([undefined]); mount(tree, fixture); const input = fixture.querySelector("input")!; expect(input.value).toBe(""); + + patch(tree, block([null])); + expect(input.value).toBe(""); + + patch(tree, block([0])); + expect(input.value).toBe("0"); + + patch(tree, block([""])); + expect(input.value).toBe(""); + + patch(tree, block([false])); + expect(input.value).toBe(""); }); test("input type=checkbox with checked attribute", () => {