Mark the radio group touched after losing focus from any input (#257)

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

@@ -17,7 +17,8 @@ import {
 
 import {
   BehaviorSubject,
-  Observable
+  Observable,
+  Subject
 } from 'rxjs';
 
 import {
@@ -61,6 +62,11 @@ const SKY_RADIO_CONTROL_VALUE_ACCESSOR: Provider = {
 })
 export class SkyRadioComponent implements OnDestroy, ControlValueAccessor {
 
+  /**
+   * Fires when users focus off a radio button.
+   */
+  public blur = new Subject<void>();
+
   /**
    * Indicates whether the radio button is selected.
    * @default false
@@ -307,6 +313,7 @@ export class SkyRadioComponent implements OnDestroy, ControlValueAccessor {
 
   public onInputFocusChange(event: Event): void {
     this.onTouchedCallback();
+    this.blur.next();
   }
 
   /* istanbul ignore next */