From fce47c4b16bc86314c97da311f57bbed20075155 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 4 Jan 2018 23:51:27 +0200 Subject: [PATCH] fix(select): not marked as touched when clicking away (#8784) 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 #8573. --- src/lib/select/select.spec.ts | 22 +++++++++++++++++++++- src/lib/select/select.ts | 1 + 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 55f27f8b682c..c3f06fcf5cd1 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1260,7 +1260,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.`); @@ -1283,6 +1283,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.'); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 245b6ce65c64..d1ca8d400138 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -547,6 +547,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, if (this._panelOpen) { this._panelOpen = false; this._changeDetectorRef.markForCheck(); + this._onTouched(); this.focus(); } }