Skip to content

Commit 7fde305

Browse files
authored
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.
1 parent b38c812 commit 7fde305

File tree

2 files changed

+13
-3
lines changed

2 files changed

+13
-3
lines changed

src/material/list/selection-list.spec.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1160,16 +1160,27 @@ describe('MatSelectionList with forms', () => {
11601160
.toBe(1, 'Expected first list option to be selected');
11611161
}));
11621162

1163-
it('should set the selection-list to touched on blur', fakeAsync(() => {
1163+
it('should not mark the model as touched when the list is blurred', fakeAsync(() => {
11641164
expect(ngModel.touched)
11651165
.toBe(false, 'Expected the selection-list to be untouched by default.');
11661166

11671167
dispatchFakeEvent(selectionListDebug.nativeElement, 'blur');
11681168
fixture.detectChanges();
1169+
tick();
1170+
1171+
expect(ngModel.touched).toBe(false, 'Expected the selection-list to remain untouched.');
1172+
}));
1173+
1174+
it('should mark the model as touched when a list item is blurred', fakeAsync(() => {
1175+
expect(ngModel.touched)
1176+
.toBe(false, 'Expected the selection-list to be untouched by default.');
11691177

1178+
dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-list-option'), 'blur');
1179+
fixture.detectChanges();
11701180
tick();
11711181

1172-
expect(ngModel.touched).toBe(true, 'Expected the selection-list to be touched after blur');
1182+
expect(ngModel.touched)
1183+
.toBe(true, 'Expected the selection-list to be touched after an item is blurred.');
11731184
}));
11741185

11751186
it('should be pristine by default', fakeAsync(() => {

src/material/list/selection-list.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,6 @@ export class MatListOption extends _MatListOptionMixinBase implements AfterConte
325325
'role': 'listbox',
326326
'class': 'mat-selection-list mat-list-base',
327327
'(focus)': '_onFocus()',
328-
'(blur)': '_onTouched()',
329328
'(keydown)': '_keydown($event)',
330329
'[attr.aria-multiselectable]': 'multiple',
331330
'[attr.aria-disabled]': 'disabled.toString()',

0 commit comments

Comments
 (0)