[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>

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"]);

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) {