fix(radio-group): focus checked radio (#12670)

Author: SisIvanova

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

@@ -230,16 +230,14 @@ describe('IgxRadioGroupDirective', () => {
 
         const domRadio = fixture.debugElement.query(By.css('igx-radio')).nativeElement;
         expect(domRadio.classList.contains('igx-radio--invalid')).toBe(false);
-        expect(radioGroup.invalid).toBe(false);
         expect(radioGroup.selected).toBeUndefined;
 
         dispatchRadioEvent('keyup', domRadio, fixture);
         expect(domRadio.classList.contains('igx-radio--focused')).toBe(true);
         dispatchRadioEvent('blur', domRadio, fixture);
         fixture.detectChanges();
         tick();
-        
-        //expect(radioGroup.invalid).toBe(true);
+
         expect(domRadio.classList.contains('igx-radio--invalid')).toBe(true);
 
         dispatchRadioEvent('keyup', domRadio, fixture);
@@ -251,7 +249,6 @@ describe('IgxRadioGroupDirective', () => {
 
         expect(domRadio.classList.contains('igx-radio--checked')).toBe(true);
         expect(radioGroup.radioButtons.first.checked).toEqual(true);
-        expect(radioGroup.invalid).toBe(false);
         expect(domRadio.classList.contains('igx-radio--invalid')).toBe(false);
     }));
 });

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

@@ -1,13 +1,14 @@
 import {
     AfterContentInit,
     AfterViewInit,
-    ContentChildren, Directive, EventEmitter, HostBinding, Input, NgModule, OnDestroy, Optional, Output, QueryList, Self
+    ContentChildren, Directive, EventEmitter, HostBinding, HostListener, Input, NgModule, OnDestroy, Optional, Output, QueryList, Self
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { fromEvent, noop, Subject } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 import { mkenum } from '../../core/utils';
 import { IChangeRadioEventArgs, IgxRadioComponent } from '../../radio/radio.component';
+import { IgxDirectionality } from '../../services/direction/directionality';
 import { IgxRippleModule } from '../ripple/ripple.directive';
 
 /**
@@ -194,6 +195,51 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
     @HostBinding('class.igx-radio-group--vertical')
     private vertical = false;
 
+    @HostListener('click', ['$event'])
+    protected handleClick(event: MouseEvent) {
+        event.stopPropagation();
+        this.selected.nativeElement.focus();
+    }
+
+    @HostListener('keydown', ['$event'])
+    protected handleKeyDown(event: KeyboardEvent) {
+        const { key } = event;
+
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+            const buttons = this.radioButtons.filter(radio => !radio.disabled);
+            const checked = buttons.find((radio) => radio.checked);
+            let index = checked ? buttons.indexOf(checked!) : -1;
+            const ltr = this._directionality.value === 'ltr';
+
+            switch (key) {
+                case 'ArrowUp':
+                    index += -1;
+                    break;
+                case 'ArrowLeft':
+                    index += ltr ? -1 : 1;
+                    break;
+                case 'ArrowRight':
+                    index += ltr ? 1 : -1;
+                    break;
+                default:
+                    index += 1;
+            }
+
+            if (index < 0) index = buttons.length - 1;
+            if (index > buttons.length - 1) index = 0;
+
+            buttons.forEach((radio) => {
+                radio.deselect();
+                radio.nativeElement.blur();
+            });
+
+            buttons[index].focused = true;
+            buttons[index].nativeElement.focus();
+            buttons[index].select();
+            event.preventDefault();
+        }
+    }
+
     /**
      * Returns the alignment of the `igx-radio-group`.
      * ```typescript
@@ -284,8 +330,8 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
         });
     }
 
-    /** 
-     * @hidden 
+    /**
+     * @hidden
      * @internal
     */
     public ngAfterViewInit() {
@@ -315,6 +361,10 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
      * @internal
      */
     private updateValidityOnBlur() {
+        this.radioButtons.forEach((button) => {
+            button.focused = false;
+        });
+
         if (this.required) {
             const checked = this.radioButtons.find(x => x.checked);
             this.invalid = !checked;
@@ -372,7 +422,8 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
 
     constructor(
         @Optional() @Self() public ngControl: NgControl,
-    ) { 
+        private _directionality: IgxDirectionality,
+    ) {
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }

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

@@ -1,6 +1,6 @@
 import {
     AfterViewInit,
-    ChangeDetectorRef, 
+    ChangeDetectorRef,
     Component,
     ElementRef,
     EventEmitter,
@@ -315,7 +315,7 @@ export class IgxRadioComponent implements AfterViewInit, ControlValueAccessor, E
     public set disabled(value: boolean) {
         this._disabled = (value as any === '') || value;
     }
-    
+
     /**
      * Sets/gets whether the radio button is invalid.
      * Default value is `false`.
@@ -385,7 +385,7 @@ export class IgxRadioComponent implements AfterViewInit, ControlValueAccessor, E
         private cdr: ChangeDetectorRef,
         protected renderer: Renderer2,
         @Optional() @Self() public ngControl: NgControl,
-    ) { 
+    ) {
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
@@ -400,8 +400,8 @@ export class IgxRadioComponent implements AfterViewInit, ControlValueAccessor, E
         this.destroy$.complete();
     }
 
-    /** 
-     * @hidden 
+    /**
+     * @hidden
      * @internal
     */
     public ngAfterViewInit() {
@@ -428,7 +428,7 @@ export class IgxRadioComponent implements AfterViewInit, ControlValueAccessor, E
      * @internal
      */
       @HostListener('change', ['$event'])
-      public _changed(){
+      public _changed(event: Event){
           if(event instanceof Event){
             event.preventDefault();
           }
@@ -441,7 +441,10 @@ export class IgxRadioComponent implements AfterViewInit, ControlValueAccessor, E
     @HostListener('keyup', ['$event'])
     public onKeyUp(event: KeyboardEvent) {
         event.stopPropagation();
-        this.focused = true;
+
+        if (!this.focused) {
+            this.focused = true;
+        }
     }
 
     /**