Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Commit

Permalink
Mark the radio group touched after losing focus from any input (#257)
Browse files Browse the repository at this point in the history
  • Loading branch information
johnhwhite committed Apr 15, 2021
1 parent 901812f commit 28eec10
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 5 deletions.
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
13 changes: 13 additions & 0 deletions src/app/public/modules/radio/radio-group.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
8 changes: 8 additions & 0 deletions src/app/public/modules/radio/radio-group.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
}

Expand Down
9 changes: 8 additions & 1 deletion src/app/public/modules/radio/radio.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ import {

import {
BehaviorSubject,
Observable
Observable,
Subject
} from 'rxjs';

import {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -307,6 +313,7 @@ export class SkyRadioComponent implements OnDestroy, ControlValueAccessor {

public onInputFocusChange(event: Event): void {
this.onTouchedCallback();
this.blur.next();
}

/* istanbul ignore next */
Expand Down

0 comments on commit 28eec10

Please sign in to comment.