From 4823a40e4599c5d7f26a7edd55311bd73c185291 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Thu, 7 Nov 2024 13:58:26 +0200
Subject: [PATCH] feat: add name property to radio-group and propagate it to
 radio buttons (#8100)

---
 .../src/vaadin-radio-group-mixin.d.ts         |  5 +++
 .../src/vaadin-radio-group-mixin.js           | 17 +++++++++-
 .../radio-group/test/radio-group.common.js    | 32 ++++++++++++++++++-
 .../test/typings/radio-button.types.ts        |  5 +++
 4 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/packages/radio-group/src/vaadin-radio-group-mixin.d.ts b/packages/radio-group/src/vaadin-radio-group-mixin.d.ts
index c935d20b10..5dd468baf2 100644
--- a/packages/radio-group/src/vaadin-radio-group-mixin.d.ts
+++ b/packages/radio-group/src/vaadin-radio-group-mixin.d.ts
@@ -53,6 +53,11 @@ export declare function RadioGroupMixin<T extends Constructor<HTMLElement>>(
   T;
 
 export declare class RadioGroupMixinClass {
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string | null | undefined;
+
   /**
    * The value of the radio group.
    */
diff --git a/packages/radio-group/src/vaadin-radio-group-mixin.js b/packages/radio-group/src/vaadin-radio-group-mixin.js
index 2ee022d8b7..583450ca4a 100644
--- a/packages/radio-group/src/vaadin-radio-group-mixin.js
+++ b/packages/radio-group/src/vaadin-radio-group-mixin.js
@@ -24,6 +24,14 @@ export const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends FieldMixin(FocusMixin(DisabledMixin(KeyboardMixin(superclass)))) {
     static get properties() {
       return {
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        name: {
+          type: String,
+          observer: '__nameChanged',
+        },
+
         /**
          * The value of the radio group.
          *
@@ -190,6 +198,13 @@ export const RadioGroupMixin = (superclass) =>
       }
     }
 
+    /** @private */
+    __nameChanged(name) {
+      this.__radioButtons.forEach((radioButton) => {
+        radioButton.name = name || this._fieldName;
+      });
+    }
+
     /**
      * @param {number} index
      * @private
@@ -234,7 +249,7 @@ export const RadioGroupMixin = (superclass) =>
      * @private
      */
     __registerRadioButton(radioButton) {
-      radioButton.name = this._fieldName;
+      radioButton.name = this.name || this._fieldName;
       radioButton.addEventListener('checked-changed', this.__onRadioButtonCheckedChange);
 
       if (this.disabled || this.readonly) {
diff --git a/packages/radio-group/test/radio-group.common.js b/packages/radio-group/test/radio-group.common.js
index 4613c4ba52..560f9875a4 100644
--- a/packages/radio-group/test/radio-group.common.js
+++ b/packages/radio-group/test/radio-group.common.js
@@ -96,13 +96,43 @@ describe('radio-group', () => {
       groupName = group._fieldName;
     });
 
-    it('should set the group name to the dynamically added radio buttons', async () => {
+    it('should set the default name to the dynamically added radio buttons', async () => {
       const radio = document.createElement('vaadin-radio-button');
       group.appendChild(radio);
       await nextFrame();
 
       expect(radio.name).to.equal(groupName);
     });
+
+    it('should propagate the group name to the existing radio buttons', async () => {
+      group.name = 'name';
+      await nextFrame();
+      buttons.forEach((radio) => {
+        expect(radio.name).to.equal(group.name);
+      });
+    });
+
+    it('should propagate the group name to the dynamically added radio buttons', async () => {
+      group.name = 'name';
+      await nextFrame();
+
+      const radio = document.createElement('vaadin-radio-button');
+      group.appendChild(radio);
+      await nextFrame();
+
+      expect(radio.name).to.equal(group.name);
+    });
+
+    it('should restore the default name on the radio buttons when group name removed', async () => {
+      group.name = 'name';
+      await nextFrame();
+
+      group.name = null;
+      await nextFrame();
+      buttons.forEach((radio) => {
+        expect(radio.name).to.equal(groupName);
+      });
+    });
   });
 
   describe('readonly property', () => {
diff --git a/packages/radio-group/test/typings/radio-button.types.ts b/packages/radio-group/test/typings/radio-button.types.ts
index d26cd60153..755569b763 100644
--- a/packages/radio-group/test/typings/radio-button.types.ts
+++ b/packages/radio-group/test/typings/radio-button.types.ts
@@ -51,6 +51,11 @@ radio.addEventListener('checked-changed', (event) => {
 
 const group = document.createElement('vaadin-radio-group');
 
+// Group properties
+assertType<string | null | undefined>(group.name);
+assertType<string | null | undefined>(group.value);
+assertType<boolean>(group.readonly);
+
 // Group mixins
 assertType<ControllerMixinClass>(group);
 assertType<DisabledMixinClass>(group);