fix(radio): do not emit event on deselect

Author: simeonoff

projects/igniteui-angular/src/lib/radio/radio.component.html

@@ -9,11 +9,11 @@
     [attr.aria-checked]="checked"
     [attr.aria-labelledby]="ariaLabelledBy"
     [attr.aria-label]="ariaLabel"
-    (click)="_clicked($event)"
     (focus)="onFocus()"
     (blur)="onBlur()" />
 
 <label #nativeLabel class="igx-radio__composite" igxRipple
+    (click)="_clicked($event)"
     igxRippleTarget=".igx-radio__ripple"
     [igxRippleDisabled]="disableRipple"
     [igxRippleCentered]="true"

projects/igniteui-angular/src/lib/radio/radio.component.ts

@@ -334,7 +334,6 @@ export class IgxRadioComponent implements ControlValueAccessor, EditorProvider {
         this.checked = false;
         this.focused = false;
         this.cdr.markForCheck();
-        this.change.emit({ value: this.value, radio: this });
     }
 
     /**

src/app/input/input.sample.html

@@ -112,4 +112,30 @@ <h4 class="sample-title">Checkbox sample</h4>
             </igx-list>
         </div>
     </article>
+    <article class="sample-column">
+        <h4 class="sample-title">Radio w/ ngModel</h4>
+        <igx-radio
+            [ngModel]="selected"
+            (ngModelChange)="onChange($event)"
+            (change)="onRadioChanged($event)"
+            value="option1">
+            Option 1
+        </igx-radio>
+        <igx-radio
+            [ngModel]="selected"
+            (ngModelChange)="onChange($event)"
+            (change)="onRadioChanged($event)"
+            value="option2">
+            Option 2
+        </igx-radio>
+        <igx-radio
+            [ngModel]="selected"
+            (ngModelChange)="onChange($event)"
+            (change)="onRadioChanged($event)"
+            value="option3" disabled="true">
+            Option 3
+        </igx-radio>
+        <br>
+        <button igxButton="raised" (click)="selectSecond()">Select second</button>
+    </article>
 </section>

src/app/input/input.sample.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { IChangeRadioEventArgs } from 'igniteui-angular';
 
 @Component({
     selector: 'app-input-sample',
@@ -7,6 +8,7 @@ import { Component } from '@angular/core';
 })
 export class InputSampleComponent {
     placeholder = 'Please enter a value';
+    selected: string;
 
     user = {
         comment: '',
@@ -49,11 +51,20 @@ export class InputSampleComponent {
         disabled: true
     }];
 
-    onClick(event) {
+    onClick(event: MouseEvent) {
         console.log(event);
     }
 
-    onChange(event) {
+    onChange(value: string) {
+        console.log('changed radio selection');
+        this.selected = value;
+    }
+
+    onRadioChanged(event: IChangeRadioEventArgs) {
         console.log(event);
     }
+
+    selectSecond() {
+        this.selected = 'option2';
+    }
 }