Skip to content

Commit 6b02a9e

Browse files
crisbetojelbourn
authored andcommitted
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.
1 parent b71ac1e commit 6b02a9e

File tree

2 files changed

+22
-1
lines changed

2 files changed

+22
-1
lines changed

src/lib/select/select.spec.ts

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1260,7 +1260,7 @@ describe('MatSelect', () => {
12601260
.not.toContain('mat-selected', `Expected option w/ the old value not to be selected.`);
12611261
}));
12621262

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

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

1286+
it('should set the control to touched when the panel is closed', fakeAsync(() => {
1287+
expect(fixture.componentInstance.control.touched)
1288+
.toBe(false, 'Expected the control to start off as untouched.');
1289+
1290+
trigger.click();
1291+
dispatchFakeEvent(trigger, 'blur');
1292+
fixture.detectChanges();
1293+
flush();
1294+
1295+
expect(fixture.componentInstance.control.touched)
1296+
.toBe(false, 'Expected the control to stay untouched when menu opened.');
1297+
1298+
fixture.componentInstance.select.close();
1299+
fixture.detectChanges();
1300+
flush();
1301+
1302+
expect(fixture.componentInstance.control.touched)
1303+
.toBe(true, 'Expected the control to be touched when the panel was closed.');
1304+
}));
1305+
12861306
it('should not set touched when a disabled select is touched', fakeAsync(() => {
12871307
expect(fixture.componentInstance.control.touched)
12881308
.toBe(false, 'Expected the control to start off as untouched.');

src/lib/select/select.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -547,6 +547,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
547547
if (this._panelOpen) {
548548
this._panelOpen = false;
549549
this._changeDetectorRef.markForCheck();
550+
this._onTouched();
550551
this.focus();
551552
}
552553
}

0 commit comments

Comments
 (0)