Skip to content

Commit

Permalink
fix(list): selection list marked as touched when tabbing in (#19177)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto authored and jelbourn committed May 8, 2020
1 parent 7a4128b commit 2e7dc62
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 3 deletions.
15 changes: 13 additions & 2 deletions src/material/list/selection-list.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
1 change: 0 additions & 1 deletion src/material/list/selection-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()',
Expand Down

0 comments on commit 2e7dc62

Please sign in to comment.