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

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

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;