Mark the radio group touched after losing focus from any input

package.json

@@ -53,7 +53,7 @@
     "@skyux/core": "4.5.0",
     "@skyux/datetime": "4.10.2",
     "@skyux/docs-tools": "4.8.1",
-    "@skyux/forms": "4.16.2",
+    "@skyux/forms": "4.16.3",
     "@skyux/http": "4.2.0",
     "@skyux/i18n": "4.1.0",
     "@skyux/indicators": "4.9.2",

src/app/public/modules/radio/radio-group.component.spec.ts

@@ -110,6 +110,19 @@ describe('Radio group component (reactive)', function () {
     expect(componentInstance.radioForm.dirty).toEqual(true);
   }));
 
+  it('should mark as touched after losing focus', fakeAsync(function () {
+    fixture.detectChanges();
+
+    expect(componentInstance.radioForm.touched).toEqual(false);
+
+    const debugElement = fixture.debugElement.query(By.css('input[type="radio"]'));
+    expect(debugElement.nativeElement).toExist();
+    debugElement.triggerEventHandler('focus', {});
+    debugElement.triggerEventHandler('blur', {});
+
+    expect(componentInstance.radioForm.touched).toEqual(true);
+  }));
+
   it('should update the ngModel properly when radio button is changed', fakeAsync(function () {
     fixture.detectChanges();
 

src/app/public/modules/radio/radio-group.component.ts

@@ -206,6 +206,14 @@ export class SkyRadioGroupComponent implements AfterContentInit, AfterViewInit,
           this.onTouched();
           this.writeValue(change.value);
         });
+      radio.blur
+        .pipe(
+          takeUntil(this.ngUnsubscribe)
+        )
+        .subscribe(() => {
+          this.onTouched();
+          this.changeDetector.markForCheck();
+        });
     });
   }
 

src/app/public/modules/radio/radio.component.ts

@@ -216,6 +216,13 @@ export class SkyRadioComponent implements OnDestroy, ControlValueAccessor {
     }
   }
 
+  /**
+   * Fires when users focus off a radio button.
+   */
+  public get blur(): Observable<undefined> {
+    return this._blur;
+  }
+
   /**
    * Fires when users select a radio button.
    */
@@ -246,6 +253,7 @@ export class SkyRadioComponent implements OnDestroy, ControlValueAccessor {
   }
 
   private _change = new EventEmitter<SkyRadioChange>();
+  private _blur = new EventEmitter<undefined>();
   private _checked = false;
   private _checkedChange = new BehaviorSubject<boolean>(this._checked);
   private _disabled: boolean = false;
@@ -307,6 +315,7 @@ export class SkyRadioComponent implements OnDestroy, ControlValueAccessor {
 
   public onInputFocusChange(event: Event): void {
     this.onTouchedCallback();
+    this._blur.emit();
   }
 
   /* istanbul ignore next */