From f6c9f4f2bf77abaca52f589ade43cf926a67a259 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Thu, 13 Jan 2022 15:15:47 +0100
Subject: [PATCH] wip

---
 src/blockdom/block_compiler.ts               |  1 +
 src/component/component_node.ts              |  2 +
 tests/misc/__snapshots__/portal.test.ts.snap | 88 +++++++++++++++++++
 tests/misc/portal.test.ts                    | 91 ++++++++++++++++++++
 4 files changed, 182 insertions(+)

diff --git a/src/blockdom/block_compiler.ts b/src/blockdom/block_compiler.ts
index 8345c19b..83d62fe8 100644
--- a/src/blockdom/block_compiler.ts
+++ b/src/blockdom/block_compiler.ts
@@ -498,6 +498,7 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
     beforeRemove() {}
 
     remove() {
+      console.log('ddd')
       elementRemove.call(this.el);
     }
 
diff --git a/src/component/component_node.ts b/src/component/component_node.ts
index 24c1fce5..ee922acf 100644
--- a/src/component/component_node.ts
+++ b/src/component/component_node.ts
@@ -282,10 +282,12 @@ export class ComponentNode<T extends typeof Component = typeof Component>
   }
 
   beforeRemove() {
+    console.log('ddddddd')
     this._destroy();
   }
 
   remove() {
+    console.log('coucou')
     this.bdom!.remove();
   }
 
diff --git a/tests/misc/__snapshots__/portal.test.ts.snap b/tests/misc/__snapshots__/portal.test.ts.snap
index 8704aa52..9ce50a7e 100644
--- a/tests/misc/__snapshots__/portal.test.ts.snap
+++ b/tests/misc/__snapshots__/portal.test.ts.snap
@@ -203,6 +203,94 @@ exports[`Portal conditional use of Portal 1`] = `
 }"
 `;
 
+exports[`Portal conditional use of Portal with child and div 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasPortal) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`Portal conditional use of Portal with child and div 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { prepareList, callPortal, withKey } = helpers;
+  
+  let block1 = createBlock(\`<div><span>hasPortal</span><block-child-0/></div>\`);
+  let block3 = createBlock(\`<p>thePortal</p>\`);
+  
+  function portalContent1(ctx, node, key = \\"\\") {
+    return block3();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`elem\`] = v_block2[i1];
+      let key1 = ctx['elem'];
+      c_block2[i1] = withKey(callPortal(ctx, node, key, '#outside', portalContent1), key1);
+    }
+    let b2 = list(c_block2, true);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`Portal conditional use of Portal with child and div, variation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block2 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasPortal) {
+      let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = block2([], [b3]);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`Portal conditional use of Portal with child and div, variation 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { prepareList, callPortal, withKey } = helpers;
+  
+  let block2 = createBlock(\`<span>hasPortal</span>\`, true);
+  let block4 = createBlock(\`<p>thePortal</p>\`, true);
+  
+  function portalContent1(ctx, node, key = \\"\\") {
+    return block4();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = block2();
+    ctx = Object.create(ctx);
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);
+    for (let i1 = 0; i1 < l_block3; i1++) {
+      ctx[\`elem\`] = v_block3[i1];
+      let key1 = ctx['elem'];
+      c_block3[i1] = withKey(callPortal(ctx, node, key, '#outside', portalContent1), key1);
+    }
+    let b3 = list(c_block3, true);
+    return multi([b2, b3], true);
+  }
+}"
+`;
+
 exports[`Portal conditional use of Portal with div 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/misc/portal.test.ts b/tests/misc/portal.test.ts
index 0abcb3a1..fcf79c1b 100644
--- a/tests/misc/portal.test.ts
+++ b/tests/misc/portal.test.ts
@@ -638,6 +638,97 @@ describe("Portal", () => {
       '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
     );
   });
+
+  test("conditional use of Portal with child and div", async () => {
+    class Child extends Component {
+      static template = xml`
+        <div>
+          <span>hasPortal</span>
+          <t t-foreach="[1]" t-as="elem" t-key="elem">
+            <t t-portal="'#outside'">
+              <p>thePortal</p>
+            </t>
+          </t>
+        </div>`;
+      
+    }
+    class Parent extends Component {
+      static template = xml`
+        <t t-if="state.hasPortal">
+          <Child />
+        </t>`;
+
+      static components = { Child };
+
+      state = useState({ hasPortal: false });
+    }
+
+    addOutsideDiv(fixture);
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
+    );
+
+    parent.state.hasPortal = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
+    );
+  });
+
+  test.only("conditional use of Portal with child and div, variation", async () => {
+    class Child extends Component {
+      static template = xml`
+          <span>hasPortal</span>
+          <t t-foreach="[1]" t-as="elem" t-key="elem">
+            <t t-portal="'#outside'">
+              <p>thePortal</p>
+            </t>
+          </t>`;
+      
+    }
+    class Parent extends Component {
+      static template = xml`
+        <t t-if="state.hasPortal">
+          <div>
+            <Child />
+          </div>
+        </t>`;
+
+      static components = { Child };
+
+      state = useState({ hasPortal: false });
+    }
+
+    addOutsideDiv(fixture);
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
+    );
+
+    parent.state.hasPortal = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
+    );
+  });
+
 });
 
 describe("Portal: UI/UX", () => {