From 7bbe1f3caf15a1d9caa91a26fbc5d3fde6f3f36c Mon Sep 17 00:00:00 2001
From: FrancoisGe <fge@odoo.com>
Date: Fri, 1 Jul 2022 07:28:53 +0000
Subject: [PATCH] [FIX] web: fix id BooleanToggleField in KanbanView

In the new Kanban view, clicking on a BooleanToggle field (on any card)
always toggles the field of the first card. We would like to toggle the
field of the card that is clicked on.

This is because the same id (fieldName) is used for all Checkbox
in the BooleanToggle. If you click on a label, its native behaviour is
to click on the input with the same id. In our case, this will always
create a click on the first ToggleBoolean (the first card).

The solution is to make the id passed to the field unique. To do this,
we will add the datapointID to it.

Before:
Card 1: id = fieldName
Card 2: id = fieldName

After
Card 1: id = fieldName_datapoint_1
Card 2: id = fieldName_datapoint_2

closes odoo/odoo#94966

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../src/views/kanban/kanban_compiler.js       |  2 ++
 .../static/tests/views/kanban_view_tests.js   | 23 +++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
index 1baaed77ac0..2005476503f 100644
--- a/addons/web/static/src/views/kanban/kanban_compiler.js
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -280,6 +280,8 @@ export class KanbanCompiler extends ViewCompiler {
             compiled = createElement("span", { "t-esc": `record["${fieldName}"].value` });
         } else {
             compiled = super.compileField(el, params);
+            const fieldId = el.getAttribute("field_id") || el.getAttribute("name");
+            compiled.setAttribute("id", `'${fieldId}_' + props.record.id`);
         }
 
         const { bold, display } = extractAttributes(el, ["bold", "display"]);
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index e875685517f..f03ff6fae02 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -8936,6 +8936,29 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(getCard(0), "div.o_field_boolean .custom-checkbox");
     });
 
+    QUnit.test("kanban view with boolean toggle widget", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="bar" widget="boolean_toggle"/></div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
+        });
+        assert.ok(getCard(0).querySelector("[name='bar'] input").checked);
+        assert.ok(getCard(1).querySelector("[name='bar'] input").checked);
+
+        await click(getCard(1), "[name='bar'] label");
+        assert.ok(getCard(0).querySelector("[name='bar'] input").checked);
+        assert.notOk(getCard(1).querySelector("[name='bar'] input").checked);
+    });
+
     QUnit.test("kanban view with monetary and currency fields without widget", async (assert) => {
         const currencies = {};
         for (const record of serverData.models.currency.records) {