fix(radio): Fixes an issue where the radio-group interfered with othe…

…r groups.

Fixes an issue where the fallback for the name of the radio group was undefined, resulting in all
radio groups getting the same name. As the radio-groups pass their name down to the individual
radios, a selection in one group interfered with the selection of all groups with the same name.

Fixes #1270

libs/barista-components/radio/src/radio-group.ts

@@ -57,7 +57,7 @@ export class DtRadioGroup<T>
     ControlValueAccessor,
     DtFormFieldControl<T> {
   private _value: T | null = null;
-  private _name = `dt-radio-group-${this.id}`;
+  private _name = `dt-radio-group-${nextUniqueId++}`;
   private _selected: DtRadioButton<T> | null = null;
   private _disabled = false;
   private _required = false;
@@ -125,9 +125,8 @@ export class DtRadioGroup<T>
     return this._id;
   }
   set id(value: string) {
-    this._id = value || this._uid;
+    this._id = value || this._name;
   }
-  private _uid = `dt-checkbox-${nextUniqueId++}`;
   private _id: string;
 
   /** Emits when a radio of this group is changed. */

libs/barista-components/radio/src/radio.spec.ts

@@ -17,7 +17,13 @@
 // tslint:disable no-lifecycle-call no-use-before-declare no-magic-numbers
 // tslint:disable no-any max-file-line-count no-unbound-method use-component-selector
 
-import { Component, DebugElement, ViewChild } from '@angular/core';
+import {
+  Component,
+  DebugElement,
+  ViewChild,
+  ViewChildren,
+  QueryList,
+} from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
@@ -52,6 +58,7 @@ describe('DtRadio', () => {
         RadioGroupWithNgModel,
         RadioGroupWithFormControl,
         StandaloneRadioButtons,
+        DoubleRadioGroups,
         InterleavedRadioGroup,
         TranscludingWrapper,
       ],
@@ -314,6 +321,40 @@ describe('DtRadio', () => {
     });
   });
 
+  describe('two separate radio groups', () => {
+    let fixture: ComponentFixture<DoubleRadioGroups>;
+    let testComponent: DoubleRadioGroups;
+    let radioDebugElements: DebugElement[];
+    let radioLabelElements: HTMLLabelElement[];
+
+    beforeEach(() => {
+      fixture = createComponent(DoubleRadioGroups);
+
+      testComponent = fixture.debugElement.componentInstance;
+
+      radioDebugElements = fixture.debugElement.queryAll(
+        By.directive(DtRadioButton),
+      );
+
+      radioLabelElements = radioDebugElements.map(
+        (debugEl) => debugEl.query(By.css('label')).nativeElement,
+      );
+    });
+
+    it('should not influence the other radio group', () => {
+      const groups = testComponent.groups.toArray();
+      expect(groups[0].value).toBe('Group1-Option1');
+      expect(groups[1].value).toBe('Group2-Option1');
+
+      // Click 'Group1-Option2'
+      radioLabelElements[1].click();
+      fixture.detectChanges();
+
+      expect(groups[0].value).toBe('Group1-Option2');
+      expect(groups[1].value).toBe('Group2-Option1');
+    });
+  });
+
   describe('group with ngModel', () => {
     let fixture: ComponentFixture<RadioGroupWithNgModel>;
     let groupDebugElement: DebugElement;
@@ -837,6 +878,24 @@ class RadioGroupWithFormControl {
   formControl = new FormControl();
 }
 
+@Component({
+  template: `
+    <dt-radio-group>
+      <dt-radio-button value="Group1-Option1" checked>One</dt-radio-button>
+      <dt-radio-button value="Group1-Option2">Two</dt-radio-button>
+      <dt-radio-button value="Group1-Option3">Three</dt-radio-button>
+    </dt-radio-group>
+    <dt-radio-group>
+      <dt-radio-button value="Group2-Option1" checked>One</dt-radio-button>
+      <dt-radio-button value="Group2-Option2">Two</dt-radio-button>
+      <dt-radio-button value="Group2-Option3">Three</dt-radio-button>
+    </dt-radio-group>
+  `,
+})
+class DoubleRadioGroups {
+  @ViewChildren(DtRadioGroup) groups: QueryList<DtRadioGroup<any>>;
+}
+
 @Component({
   template: ` <dt-radio-button [tabIndex]="tabIndex"></dt-radio-button> `,
 })

libs/barista-components/radio/src/radio.ts

@@ -210,12 +210,14 @@ export class DtRadioButton<T> extends _DtRadioButtonMixinBase
         }
       },
     );
+    if (this._radioGroup) {
+      this.name = this._radioGroup.name;
+    }
   }
 
   ngOnInit(): void {
     if (this._radioGroup) {
       this.checked = this._radioGroup.value === this._value;
-      this.name = this._radioGroup.name;
     }
   }
 
@@ -241,7 +243,9 @@ export class DtRadioButton<T> extends _DtRadioButtonMixinBase
   _focusChanged(isFocused: boolean): void {
     if (isFocused !== this._focused) {
       this._focused = isFocused;
-      this._radioGroup._updateFocused();
+      if (this._radioGroup) {
+        this._radioGroup._updateFocused();
+      }
     }
   }