Skip to content

Commit

Permalink
fix(select): not marked as touched when clicking away (angular#8784)
Browse files Browse the repository at this point in the history
Currently `mat-select` is only marked as touched when the trigger is blurred. This means that it still considered untouched if the user opens the panel and clicks away, which then requires another click to show any validation messages. These changes switch to considering the control as touched whenever the panel is closed.

Fixes angular#8573.
  • Loading branch information
crisbeto authored and jelbourn committed Jan 8, 2018
1 parent a2438fa commit c0209fc
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 1 deletion.
22 changes: 21 additions & 1 deletion src/lib/select/select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1180,7 +1180,7 @@ describe('MatSelect', () => {
.not.toContain('mat-selected', `Expected option w/ the old value not to be selected.`);
}));

it('should set the control to touched when the select is touched', fakeAsync(() => {
it('should set the control to touched when the select is blurred', fakeAsync(() => {
expect(fixture.componentInstance.control.touched)
.toEqual(false, `Expected the control to start off as untouched.`);

Expand All @@ -1203,6 +1203,26 @@ describe('MatSelect', () => {
.toEqual(true, `Expected the control to be touched as soon as focus left the select.`);
}));

it('should set the control to touched when the panel is closed', fakeAsync(() => {
expect(fixture.componentInstance.control.touched)
.toBe(false, 'Expected the control to start off as untouched.');

trigger.click();
dispatchFakeEvent(trigger, 'blur');
fixture.detectChanges();
flush();

expect(fixture.componentInstance.control.touched)
.toBe(false, 'Expected the control to stay untouched when menu opened.');

fixture.componentInstance.select.close();
fixture.detectChanges();
flush();

expect(fixture.componentInstance.control.touched)
.toBe(true, 'Expected the control to be touched when the panel was closed.');
}));

it('should not set touched when a disabled select is touched', fakeAsync(() => {
expect(fixture.componentInstance.control.touched)
.toBe(false, 'Expected the control to start off as untouched.');
Expand Down
1 change: 1 addition & 0 deletions src/lib/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -544,6 +544,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
if (this._panelOpen) {
this._panelOpen = false;
this._changeDetectorRef.markForCheck();
this._onTouched();
this.focus();
}
}
Expand Down

0 comments on commit c0209fc

Please sign in to comment.