From d5f16b0f722fcd6822c74db0743ee35bba31e511 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Wed, 20 Mar 2019 20:13:19 +0100 Subject: [PATCH] fix(list): not picking up indirect descendant lines Fixes the `mat-list-item` not picking up `mat-line`, if it's not a direct descendant. Fixes #15466. --- src/lib/list/list.spec.ts | 40 +++++++++++++++++++++++++++------------ src/lib/list/list.ts | 2 +- 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts index e11d4684a9df..764c88c27cf7 100644 --- a/src/lib/list/list.spec.ts +++ b/src/lib/list/list.spec.ts @@ -13,18 +13,10 @@ describe('MatList', () => { TestBed.configureTestingModule({ imports: [MatListModule], declarations: [ - ListWithOneAnchorItem, - ListWithOneItem, - ListWithTwoLineItem, - ListWithThreeLineItem, - ListWithAvatar, - ListWithItemWithCssClass, - ListWithDynamicNumberOfLines, - ListWithMultipleItems, - ListWithManyLines, - NavListWithOneAnchorItem, - ActionListWithoutType, - ActionListWithType + ListWithOneAnchorItem, ListWithOneItem, ListWithTwoLineItem, ListWithThreeLineItem, + ListWithAvatar, ListWithItemWithCssClass, ListWithDynamicNumberOfLines, + ListWithMultipleItems, ListWithManyLines, NavListWithOneAnchorItem, ActionListWithoutType, + ActionListWithType, ListWithIndirectDescendantLines ], }); @@ -274,6 +266,15 @@ describe('MatList', () => { .toBe(0, 'Expected no ripples after list ripples are disabled.'); })); + + it('should pick up indirect descendant lines', () => { + const fixture = TestBed.createComponent(ListWithIndirectDescendantLines); + fixture.detectChanges(); + + const listItems = fixture.debugElement.children[0].queryAll(By.css('mat-list-item')); + expect(listItems[0].nativeElement.className).toContain('mat-2-line'); + expect(listItems[1].nativeElement.className).toContain('mat-2-line'); + }); }); @@ -409,3 +410,18 @@ class ListWithDynamicNumberOfLines extends BaseTestList { } `}) class ListWithMultipleItems extends BaseTestList { } + +// Note the blank `ngSwitch` which we need in order to hit the bug that we're testing. +@Component({ + template: ` + + + +

{{item.name}}

+

{{item.description}}

+
+
+
` +}) +class ListWithIndirectDescendantLines extends BaseTestList { +} diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 1b9ee16a10e9..49af4f21c86c 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -180,7 +180,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn private _list?: MatNavList | MatList; private _destroyed = new Subject(); - @ContentChildren(MatLine) _lines: QueryList; + @ContentChildren(MatLine, {descendants: true}) _lines: QueryList; @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler; @ContentChild(MatListIconCssMatStyler) _icon: MatListIconCssMatStyler;