[FIX] compiler: better handle update of properties with same value

Before this commit, owl would incorrectly skip patching html properties
when the new value is the same as the value used in the previous render.
However, this is incorrect, since the user may have changed the value by
clicking on a checkbox, or changing some text in an input.

So, to be more correct, owl has to force the update whenever it
encounters a prop.  This is however hard to do without impacting the
main update loop, so we kind of work around the problem by using String
and Boolean instance, instead of primitive values.
This commit is contained in:
Géry Debongnie
2022-07-08 14:02:45 +02:00
committed by Sam Degueldre
parent 6c72e0a143
commit f8073cb153
5 changed files with 85 additions and 15 deletions
+12 -6
View File
@@ -1,3 +1,4 @@
import { isProp } from "../runtime/blockdom/attributes";
import {
compileExpr,
compileExprToArray,
@@ -22,12 +23,12 @@ import {
ASTTif,
ASTTKey,
ASTTOut,
ASTTSet,
ASTTranslation,
ASTType,
ASTTPortal,
EventHandlers,
ASTTranslation,
ASTTSet,
ASTType,
Attrs,
EventHandlers,
} from "./parser";
type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
@@ -578,13 +579,18 @@ export class CodeGenerator {
attrName = key.slice(7);
attrs["block-attribute-" + idx] = attrName;
} else if (key.startsWith("t-att")) {
attrName = key === "t-att" ? null : key.slice(6);
expr = compileExpr(ast.attrs[key]);
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
const C = attrName === "value" ? "String" : "Boolean";
expr = `new ${C}(${expr})`;
}
const idx = block!.insertData(expr, "attr");
if (key === "t-att") {
attrs[`block-attributes`] = String(idx);
} else {
attrName = key.slice(6);
attrs[`block-attribute-${idx}`] = attrName;
attrs[`block-attribute-${idx}`] = attrName!;
}
} else if (this.translatableAttributes.includes(key)) {
attrs[key] = this.translateFn(ast.attrs[key]);
+1 -1
View File
@@ -144,7 +144,7 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
export function makePropSetter(name: string): Setter<HTMLElement> {
return function setProp(this: HTMLElement, value: any) {
// support 0, fallback to empty string for other falsy values
(this as any)[name] = value === 0 ? 0 : value || "";
(this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
};
}