feat: add name property to radio-group and propagate it to radio buttons (#8100)

Author: web-padawan

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.
    */

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

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', () => {

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