From 0c1a7aabaeb35f3d478f823c6c4bf4cf54da1a75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Tue, 3 Sep 2019 16:38:24 +0200
Subject: [PATCH] [FIX] component: better templateId for multiple subcomponents

Of course, the templateId computation is kind of tricky.  Here, an issue
occurred because the templateId did not take the componentId into
account when we were in a loop, but with no keyed parent.

This meant that multiple sub components shared the same templateId,
confusing the vdom algorithm.
---
 src/component/directive.ts                    |  2 +-
 .../__snapshots__/component.test.ts.snap      |  4 +--
 tests/component/component.test.ts             | 27 +++++++++++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/component/directive.ts b/src/component/directive.ts
index 73cc5eb7..27b46cde 100644
--- a/src/component/directive.ts
+++ b/src/component/directive.ts
@@ -245,7 +245,7 @@ QWeb.addDirective({
       ? `key${keyID}`
       : ctx.inLoop
       ? ctx.currentKey
-        ? `String(${ctx.currentKey} + '_k_' + i)`
+        ? `String(${ctx.currentKey} + '_k_' + i + '_c_' + ${componentID} )`
         : `String(-${componentID} - i)`
       : String(componentID);
     if (ctx.allowMultipleRoots) {
diff --git a/tests/component/__snapshots__/component.test.ts.snap b/tests/component/__snapshots__/component.test.ts.snap
index 38ad8287..5efc08d6 100644
--- a/tests/component/__snapshots__/component.test.ts.snap
+++ b/tests/component/__snapshots__/component.test.ts.snap
@@ -1375,7 +1375,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
         c2.push(vn6);
         //COMPONENT
         let def8;
-        let templateId10 = String(nodeKey6 + '_k_' + i);
+        let templateId10 = String(nodeKey6 + '_k_' + i + '_c_' + 9 );
         let w9 = templateId10 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId10]] : false;
         let _7_index = c6.length;
         c6.push(null);
@@ -1464,7 +1464,7 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
         var _7 = 'User '+context['user'].name;
         //COMPONENT
         let def9;
-        let templateId11 = String(nodeKey6 + '_k_' + i);
+        let templateId11 = String(nodeKey6 + '_k_' + i + '_c_' + 10 );
         let w10 = templateId11 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId11]] : false;
         let _8_index = c6.length;
         c6.push(null);
diff --git a/tests/component/component.test.ts b/tests/component/component.test.ts
index 56522a96..7ce97431 100644
--- a/tests/component/component.test.ts
+++ b/tests/component/component.test.ts
@@ -1373,6 +1373,33 @@ describe("composition", () => {
     );
   });
 
+  test("list of two sub components inside other nodes", async () => {
+    // this confuses the patching algorithm...
+    env.qweb.addTemplate("ChildWidget", `<span>child</span>`);
+
+    env.qweb.addTemplates(`
+        <templates>
+            <div t-name="Parent">
+                <div t-foreach="state.blips" t-as="blip" t-key="blip.id">
+                    <SubWidget />
+                    <SubWidget />
+                </div>
+            </div>
+            <span t-name="SubWidget">asdf</span>
+        </templates>`);
+
+    class SubWidget extends Widget {}
+    class Parent extends Widget {
+      components = { SubWidget };
+      state = { blips: [{ a: "a", id: 1 }] };
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe(
+      "<div><div><span>asdf</span><span>asdf</span></div></div>"
+    );
+  });
+
   test("t-component with dynamic value", async () => {
     env.qweb.addTemplate("ParentWidget", `<div><t t-component="{{state.widget}}"/></div>`);
     class ParentWidget extends Widget {