From 68e8dfacd2a9b9914bb48f3bbef447a67b8472fa Mon Sep 17 00:00:00 2001
From: FrancoisGe <fge@odoo.com>
Date: Thu, 10 Aug 2023 11:54:40 +0000
Subject: [PATCH] [FIX] web: RadioField with same selection

Before this commit, having two RadioField fields with the same values
was going to confuse them. When you click on the second, the first is modified.

Why:
The id used to link the label to the field's input was mistakenly
removed during refactoring. So we're going to put it back, and each radio
field will have its own id.

closes odoo/odoo#131663

Signed-off-by: Samuel Degueldre (sad) <sad@odoo.com>
---
 .../src/views/fields/radio/radio_field.js     |  4 +-
 .../tests/views/fields/radio_field_tests.js   | 46 +++++++++++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/views/fields/radio/radio_field.js b/addons/web/static/src/views/fields/radio/radio_field.js
index c8ba38ce470..19ff94234d9 100644
--- a/addons/web/static/src/views/fields/radio/radio_field.js
+++ b/addons/web/static/src/views/fields/radio/radio_field.js
@@ -6,6 +6,7 @@ import { registry } from "@web/core/registry";
 import { useSpecialData } from "@web/views/fields/relational_utils";
 import { standardFieldProps } from "../standard_field_props";
 
+let nextId = 0;
 export class RadioField extends Component {
     static template = "web.RadioField";
     static props = {
@@ -18,9 +19,8 @@ export class RadioField extends Component {
         orientation: "vertical",
     };
 
-    static nextId = 0;
-
     setup() {
+        this.id = `radio_field_${nextId++}`;
         this.type = this.props.record.fields[this.props.name].type;
         if (this.type === "many2one") {
             this.specialData = useSpecialData(async (orm, props) => {
diff --git a/addons/web/static/tests/views/fields/radio_field_tests.js b/addons/web/static/tests/views/fields/radio_field_tests.js
index f02b949d45b..33d5e8ea087 100644
--- a/addons/web/static/tests/views/fields/radio_field_tests.js
+++ b/addons/web/static/tests/views/fields/radio_field_tests.js
@@ -213,6 +213,52 @@ QUnit.module("Fields", (hooks) => {
         );
     });
 
+    QUnit.test("Two RadioField with same selection", async function (assert) {
+        serverData.models.partner.fields.color_2 = serverData.models.partner.fields.color;
+        serverData.models.partner.records[0].color = "black";
+        serverData.models.partner.records[0].color_2 = "black";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            resId: 1,
+            arch: `
+            <form>
+                <group>
+                    <field name="color" widget="radio"/>
+                </group>
+                <group>
+                    <field name="color_2" widget="radio"/>
+                </group>
+            </form>`,
+        });
+
+        assert.hasAttrValue(
+            target.querySelector("[name='color'] input.o_radio_input:checked"),
+            "data-value",
+            "black"
+        );
+        assert.hasAttrValue(
+            target.querySelector("[name='color_2'] input.o_radio_input:checked"),
+            "data-value",
+            "black"
+        );
+
+        // click on Red
+        await click(target.querySelector("[name='color_2'] label"));
+        assert.hasAttrValue(
+            target.querySelector("[name='color'] input.o_radio_input:checked"),
+            "data-value",
+            "black"
+        );
+        assert.hasAttrValue(
+            target.querySelector("[name='color_2'] input.o_radio_input:checked"),
+            "data-value",
+            "red"
+        );
+    });
+
     QUnit.test("fieldradio widget has o_horizontal or o_vertical class", async function (assert) {
         serverData.models.partner.fields.color2 = serverData.models.partner.fields.color;