[FIX] qweb: add support for t-att-value on <select> tags

Before this commit, it was not possible to set the value of a select tag
by using the t-att-value attribute.

Doing so is not actually trivial because of the way the vdom works: it
processes the node attributes before its children are created, which
means that the vdom code tries to set the initial value of the select
before its children are created, which means that it is ignored. To make
it work, I added a node create hook which is called after the children
are completely processed.

closes #873
This commit is contained in:
Géry Debongnie
2021-07-03 08:39:11 +02:00
committed by aab-odoo
parent 52a200878a
commit 1b513a1637
3 changed files with 80 additions and 8 deletions
@@ -1073,6 +1073,39 @@ exports[`special cases for some specific html attributes/properties input type=
}"
`;
exports[`special cases for some specific html attributes/properties select with t-att-value 1`] = `
"function anonymous(context, extra
) {
// Template name: \\"test\\"
let scope = Object.create(context);
let h = this.h;
let expr1 = scope['value'];
let c3 = [], p3 = {key:3,attrs:{value: expr1},props:{value: expr1}};
let vn3 = h('select', p3, c3);
p3.hook = {
create: (_, n) => {
n.elm.value=expr1;
},
};
let _4 = 'potato';
let c5 = [], p5 = {key:5,attrs:{value: _4}};
let vn5 = h('option', p5, c5);
c3.push(vn5);
c5.push({text: \`Potato\`});
let _6 = 'tomato';
let c7 = [], p7 = {key:7,attrs:{value: _6}};
let vn7 = h('option', p7, c7);
c3.push(vn7);
c7.push({text: \`Tomato\`});
let _8 = 'onion';
let c9 = [], p9 = {key:9,attrs:{value: _8}};
let vn9 = h('option', p9, c9);
c3.push(vn9);
c9.push({text: \`Onion\`});
return vn3;
}"
`;
exports[`special cases for some specific html attributes/properties various boolean html attributes 1`] = `
"function anonymous(context, extra
) {
+24
View File
@@ -1950,6 +1950,30 @@ describe("special cases for some specific html attributes/properties", () => {
patch(vnode2, vnode3);
expect(elm.value).toBe("potato");
});
test("select with t-att-value", () => {
const template = `
<select t-att-value="value">
<option value="potato">Potato</option>
<option value="tomato">Tomato</option>
<option value="onion">Onion</option>
</select>`;
qweb.addTemplate("test", template);
const vnode1 = qweb.render("test", { value: "tomato" });
const vnode2 = patch(document.createElement("select"), vnode1);
let elm = vnode2.elm as HTMLSelectElement;
expect(elm.value).toBe("tomato");
elm.value = "potato";
expect(elm.value).toBe("potato");
// rerender with a different value, and patch actual dom, to check that
// select value was properly reset by owl
const vnode3 = qweb.render("test", { value: "onion" });
patch(vnode2, vnode3);
expect(elm.value).toBe("onion");
expect(qweb.templates.test.fn.toString()).toMatchSnapshot();
});
});
describe("whitespace handling", () => {