From 2e7dc62134179d8a0f062ea5551b79dd69cbefa7 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 8 May 2020 21:47:05 +0200 Subject: [PATCH] fix(list): selection list marked as touched when tabbing in (#19177) In #18445 the selection list was changed so that it moves focus to the first item when the list receives focus. The problem is that the logic that marks it as touched was still using the list's `blur` event which means that it'll be marked as touched when focus goes from the list to the item. These changes switch to only using the `blur` event on the item. Fixes #19171. --- src/material/list/selection-list.spec.ts | 15 +++++++++++++-- src/material/list/selection-list.ts | 1 - 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts index f106c895ab44..51326f144cae 100644 --- a/src/material/list/selection-list.spec.ts +++ b/src/material/list/selection-list.spec.ts @@ -1160,16 +1160,27 @@ describe('MatSelectionList with forms', () => { .toBe(1, 'Expected first list option to be selected'); })); - it('should set the selection-list to touched on blur', fakeAsync(() => { + it('should not mark the model as touched when the list is blurred', fakeAsync(() => { expect(ngModel.touched) .toBe(false, 'Expected the selection-list to be untouched by default.'); dispatchFakeEvent(selectionListDebug.nativeElement, 'blur'); fixture.detectChanges(); + tick(); + + expect(ngModel.touched).toBe(false, 'Expected the selection-list to remain untouched.'); + })); + + it('should mark the model as touched when a list item is blurred', fakeAsync(() => { + expect(ngModel.touched) + .toBe(false, 'Expected the selection-list to be untouched by default.'); + dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-list-option'), 'blur'); + fixture.detectChanges(); tick(); - expect(ngModel.touched).toBe(true, 'Expected the selection-list to be touched after blur'); + expect(ngModel.touched) + .toBe(true, 'Expected the selection-list to be touched after an item is blurred.'); })); it('should be pristine by default', fakeAsync(() => { diff --git a/src/material/list/selection-list.ts b/src/material/list/selection-list.ts index 938c58aef01f..9a42ca215b43 100644 --- a/src/material/list/selection-list.ts +++ b/src/material/list/selection-list.ts @@ -325,7 +325,6 @@ export class MatListOption extends _MatListOptionMixinBase implements AfterConte 'role': 'listbox', 'class': 'mat-selection-list mat-list-base', '(focus)': '_onFocus()', - '(blur)': '_onTouched()', '(keydown)': '_keydown($event)', '[attr.aria-multiselectable]': 'multiple', '[attr.aria-disabled]': 'disabled.toString()',