mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
fix: properly destroy/detach widgets in some cases
Sometimes, widgets were not properly destroyed/detached. This was caused by the fact that we used the hook remove, when we sometimes need to use the hook destroy as well.
This commit is contained in:
@@ -981,6 +981,8 @@ const widgetDirective: Directive = {
|
||||
ctx.parentNode
|
||||
}[_${dummyID}_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w${widgetID}._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){w${widgetID}.${
|
||||
keepAlive ? "detach" : "destroy"
|
||||
}()},destroy(){w${widgetID}.${
|
||||
keepAlive ? "detach" : "destroy"
|
||||
}()}}; w${widgetID}.__widget__.pvnode = pvnode;});`
|
||||
);
|
||||
ctx.addElse();
|
||||
|
||||
@@ -51,7 +51,7 @@ exports[`composition sub widgets with some state rendered in a loop 1`] = `
|
||||
}
|
||||
}
|
||||
if (isNew7) {
|
||||
def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: key8});c1[_5_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w7._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){w7.destroy()}}; w7.__widget__.pvnode = pvnode;});
|
||||
def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: key8});c1[_5_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w7._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){w7.destroy()},destroy(){w7.destroy()}}; w7.__widget__.pvnode = pvnode;});
|
||||
} else {
|
||||
def6 = def6.then(()=>{if (w7.__widget__.isDestroyed) {return};let vnode;if (!w7.__widget__.vnode){vnode=w7.__widget__.pvnode} else { vnode=h(w7.__widget__.vnode.sel, {key: key8});vnode.elm=w7.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w7.el,a.elm);a.elm=w7.el;w7.__mount();},remove(){w7.destroy()}}}c1[_5_index]=vnode;});
|
||||
}
|
||||
@@ -99,7 +99,7 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
|
||||
}
|
||||
}
|
||||
if (isNew4) {
|
||||
def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: key5});c1[_2_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w4._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){w4.destroy()}}; w4.__widget__.pvnode = pvnode;});
|
||||
def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: key5});c1[_2_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w4._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){w4.destroy()},destroy(){w4.destroy()}}; w4.__widget__.pvnode = pvnode;});
|
||||
} else {
|
||||
def3 = def3.then(()=>{if (w4.__widget__.isDestroyed) {return};let vnode;if (!w4.__widget__.vnode){vnode=w4.__widget__.pvnode} else { vnode=h(w4.__widget__.vnode.sel, {key: key5});vnode.elm=w4.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w4.el,a.elm);a.elm=w4.el;w4.__mount();},remove(){w4.destroy()}}}c1[_2_index]=vnode;});
|
||||
}
|
||||
@@ -145,7 +145,7 @@ exports[`random stuff/miscellaneous t-props should not be undefined (snapshottin
|
||||
}
|
||||
}
|
||||
if (isNew4) {
|
||||
def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4});c1[_2_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w4._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){w4.destroy()}}; w4.__widget__.pvnode = pvnode;});
|
||||
def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4});c1[_2_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w4._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){w4.destroy()},destroy(){w4.destroy()}}; w4.__widget__.pvnode = pvnode;});
|
||||
} else {
|
||||
def3 = def3.then(()=>{if (w4.__widget__.isDestroyed) {return};let vnode;if (!w4.__widget__.vnode){vnode=w4.__widget__.pvnode} else { vnode=h(w4.__widget__.vnode.sel, {key: 4});vnode.elm=w4.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w4.el,a.elm);a.elm=w4.el;w4.__mount();},remove(){w4.destroy()}}}c1[_2_index]=vnode;});
|
||||
}
|
||||
|
||||
@@ -404,6 +404,45 @@ describe("lifecycle hooks", () => {
|
||||
await widget.updateProps({ val: 666 });
|
||||
expect(fixture.innerHTML).toBe("<div>666</div>");
|
||||
});
|
||||
|
||||
test("sub widget (inside sub node): hooks are correctly called", async () => {
|
||||
let destroyed = false;
|
||||
let created = false;
|
||||
let mounted = false;
|
||||
class ParentWidget extends Widget {
|
||||
inlineTemplate = `
|
||||
<div>
|
||||
<t t-if="state.flag">
|
||||
<div><t t-widget="child"/></div>
|
||||
</t>
|
||||
</div>`;
|
||||
widgets = { child: ChildWidget };
|
||||
state = { flag: false };
|
||||
}
|
||||
|
||||
class ChildWidget extends Widget {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
created = true;
|
||||
}
|
||||
mounted() {
|
||||
mounted = true;
|
||||
}
|
||||
destroyed() {
|
||||
destroyed = true;
|
||||
}
|
||||
}
|
||||
const widget = new ParentWidget(env);
|
||||
await widget.mount(fixture);
|
||||
expect(created).toBe(false);
|
||||
expect(mounted).toBe(false);
|
||||
await widget.updateState({ flag: true });
|
||||
expect(mounted).toBe(true);
|
||||
expect(created).toBe(true);
|
||||
expect(destroyed).toBe(false);
|
||||
await widget.updateState({ flag: false });
|
||||
expect(destroyed).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("destroy method", () => {
|
||||
|
||||
Reference in New Issue
Block a user