fix(radio): can't select radio on click

Author: simeonoff

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

@@ -9,10 +9,10 @@
     [attr.aria-checked]="checked"
     [attr.aria-labelledby]="ariaLabelledBy"
     [attr.aria-label]="ariaLabel"
-    (click)="_clicked($event)"
     (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

@@ -142,7 +142,7 @@ export class IgxRadioComponent implements ControlValueAccessor, EditorProvider {
      * @memberof IgxRadioComponent
      */
     @Input()
-    public value: any;
+    public value: string;
 
     /**
      * Sets/gets the `name` attribute of the radio component.
@@ -323,6 +323,7 @@ export class IgxRadioComponent implements ControlValueAccessor, EditorProvider {
     public onKeyUp(event: KeyboardEvent) {
         event.stopPropagation();
         this.focused = true;
+        this.select();
     }
 
     /**
@@ -374,7 +375,7 @@ export class IgxRadioComponent implements ControlValueAccessor, EditorProvider {
      * this.radio.writeValue('radioButtonValue');
      * ```
      */
-    public writeValue(value: any) {
+    public writeValue(value: string) {
         this.value = this.value || value;
 
         if (value === this.value) {

src/app/input/input.sample.html

@@ -114,4 +114,12 @@ <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" (change)="onChange($event)" value="option1">Option 1</igx-radio>
+        <igx-radio [ngModel]="selected" (change)="onChange($event)" value="option2">Option 2</igx-radio>
+        <igx-radio [ngModel]="selected" (change)="onChange($event)" value="option3" disabled="true">Option 3</igx-radio>
+    </article>
 </section>

src/app/input/input.sample.ts

@@ -7,6 +7,8 @@ import { Component } from '@angular/core';
 })
 export class InputSampleComponent {
     public placeholder = 'Please enter a value';
+    public selected: string;
+
     public user = {
         comment: '',
         firstName: 'John',
@@ -51,5 +53,6 @@ export class InputSampleComponent {
 
     public onChange(event) {
         console.log(event);
+        this.selected = event.value;
     }
 }