mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[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:
@@ -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
|
||||
) {
|
||||
|
||||
@@ -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", () => {
|
||||
|
||||
Reference in New Issue
Block a user