[FIX] portal: correctly mount portal content in target created by mount

Previously, blah blah blah
This commit is contained in:
Samuel Degueldre
2022-10-19 13:31:09 +02:00
parent 2c244aa31a
commit 545d40b211
2 changed files with 9 additions and 13 deletions
+8 -12
View File
@@ -21,20 +21,16 @@ class VPortal extends VText implements Partial<VNode<VPortal>> {
this.target = document.querySelector(this.selector) as any; this.target = document.querySelector(this.selector) as any;
if (this.target) { if (this.target) {
this.content!.mount(this.target!, null); this.content!.mount(this.target!, null);
} else {
this.content!.mount(parent, anchor);
} }
} }
beforeRemove() { beforeRemove() {
this.content!.beforeRemove(); // this.target not being null means content is mounted
} if (this.target) {
remove() { this.content!.beforeRemove();
if (this.content) {
super.remove();
this.content!.remove(); this.content!.remove();
this.content = null;
} }
this.content = null;
} }
patch(other: VPortal) { patch(other: VPortal) {
@@ -73,9 +69,9 @@ export class Portal extends Component {
onMounted(() => { onMounted(() => {
const portal: VPortal = node.bdom; const portal: VPortal = node.bdom;
if (!portal.target) { if (!portal.target) {
const target: HTMLElement = document.querySelector(this.props.target); portal.target = document.querySelector(this.props.target);
if (target) { if (portal.target) {
portal.content!.moveBeforeVNode(target, null); portal.content!.mount(portal.target, null);
} else { } else {
throw new OwlError("invalid portal target"); throw new OwlError("invalid portal target");
} }
@@ -84,7 +80,7 @@ export class Portal extends Component {
onWillUnmount(() => { onWillUnmount(() => {
const portal: VPortal = node.bdom; const portal: VPortal = node.bdom;
portal.remove(); portal.beforeRemove();
}); });
} }
} }
+1 -1
View File
@@ -892,7 +892,7 @@ describe("Portal", () => {
} }
await mount(Parent, fixture); await mount(Parent, fixture);
expect(fixture.innerHTML).toBe( expect(fixture.innerHTML).toBe(
'<span>child</span><div class="portal"></div><span>portal</span>' '<span>child</span><div class="portal"><span>portal</span></div>'
); );
}); });