fix(radio-group): correctly check selected items

Author: simeonoff

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts

@@ -12,6 +12,7 @@ describe('IgxRadioGroupDirective', () => {
         TestBed.configureTestingModule({
             declarations: [
                 RadioGroupComponent,
+                RadioGroupSimpleComponent,
                 RadioGroupWithModelComponent,
                 RadioGroupReactiveFormsComponent,
                 RadioGroupDeepProjectionComponent
@@ -193,8 +194,37 @@ describe('IgxRadioGroupDirective', () => {
         expect(radioGroup.value).toEqual(0);
         expect(radioGroup.radioButtons.first.checked).toEqual(true);
     }));
+
+    it('Updates checked radio button correctly', fakeAsync(() => {
+        const fixture = TestBed.createComponent(RadioGroupSimpleComponent);
+        fixture.detectChanges();
+        tick();
+
+        const radioGroup = fixture.componentInstance.radioGroup;
+        expect(radioGroup.radioButtons.first.checked).toEqual(true);
+        expect(radioGroup.radioButtons.last.checked).toEqual(false);
+
+        radioGroup.radioButtons.last.select();
+        fixture.detectChanges();
+        tick();
+
+        expect(radioGroup.radioButtons.first.checked).toEqual(false);
+        expect(radioGroup.radioButtons.last.checked).toEqual(true);
+    }));
 });
 
+@Component({
+    template: `
+    <igx-radio-group #radioGroup>
+        <igx-radio [checked]="true">Option 1</igx-radio>
+        <igx-radio>Option 2</igx-radio>
+    </igx-radio-group>
+`
+})
+class RadioGroupSimpleComponent {
+    @ViewChild('radioGroup', { read: IgxRadioGroupDirective, static: true }) public radioGroup: IgxRadioGroupDirective;
+}
+
 @Component({
     template: `<igx-radio-group #radioGroup name="radioGroup" value="Baz" required="true" labelPosition="before">
     <igx-radio *ngFor="let item of ['Foo', 'Bar', 'Baz']" value="{{item}}">

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts

@@ -366,13 +366,11 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
      * @internal
      */
     private _selectedRadioButtonChanged(args: IChangeRadioEventArgs) {
-        if (this._selected !== args.radio) {
-            if (this._selected) {
-                this._selected.checked = false;
-            }
-            this._selected = args.radio;
-        }
+        this.radioButtons.forEach(button => {
+            button.checked = button.id === args.radio.id;
+        });
 
+        this._selected = args.radio;
         this._value = args.value;
 
         if (this._isInitialized) {