diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts index 5763e2328b43..e999214c5624 100644 --- a/src/material-experimental/mdc-select/select.spec.ts +++ b/src/material-experimental/mdc-select/select.spec.ts @@ -3742,6 +3742,32 @@ describe('MDC-based MatSelect', () => { }).not.toThrow(); })); + it('should be able to programmatically set an array with duplicate values', fakeAsync(() => { + testInstance.foods = [ + { value: 'steak-0', viewValue: 'Steak' }, + { value: 'pizza-1', viewValue: 'Pizza' }, + { value: 'pizza-1', viewValue: 'Pizza' }, + { value: 'pizza-1', viewValue: 'Pizza' }, + { value: 'pizza-1', viewValue: 'Pizza' }, + { value: 'pizza-1', viewValue: 'Pizza' }, + ]; + fixture.detectChanges(); + testInstance.control.setValue(['steak-0', 'pizza-1', 'pizza-1', 'pizza-1']); + fixture.detectChanges(); + + trigger.click(); + fixture.detectChanges(); + + const optionNodes = Array.from(overlayContainerElement.querySelectorAll('mat-option')); + const optionInstances = testInstance.options.toArray(); + + expect(optionNodes.map(node => node.classList.contains('mdc-list-item--selected'))) + .toEqual([true, true, true, true, false, false]); + + expect(optionInstances.map(instance => instance.selected)) + .toEqual([true, true, true, true, false, false]); + })); + }); it('should be able to provide default values through an injection token', fakeAsync(() => { diff --git a/src/material-experimental/mdc-tabs/tab-body.html b/src/material-experimental/mdc-tabs/tab-body.html index b15d5940aa02..9ad982213338 100644 --- a/src/material-experimental/mdc-tabs/tab-body.html +++ b/src/material-experimental/mdc-tabs/tab-body.html @@ -4,6 +4,7 @@ params: {animationDuration: animationDuration} }" (@translateTab.start)="_onTranslateTabStarted($event)" - (@translateTab.done)="_translateTabComplete.next($event)"> + (@translateTab.done)="_translateTabComplete.next($event)" + cdkScrollable> diff --git a/src/material-experimental/mdc-tabs/tab-body.spec.ts b/src/material-experimental/mdc-tabs/tab-body.spec.ts index e5583b0e625f..30fce4c6f190 100644 --- a/src/material-experimental/mdc-tabs/tab-body.spec.ts +++ b/src/material-experimental/mdc-tabs/tab-body.spec.ts @@ -5,7 +5,9 @@ import {AfterContentInit, Component, TemplateRef, ViewChild, ViewContainerRef} f import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; import {MatRippleModule} from '@angular/material-experimental/mdc-core'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {CdkScrollable, ScrollingModule} from '@angular/cdk/scrolling'; import {MatTabBody, MatTabBodyPortal} from './tab-body'; +import {By} from '@angular/platform-browser'; import {Subject} from 'rxjs'; @@ -178,6 +180,33 @@ describe('MDC-based MatTabBody', () => { expect(fixture.componentInstance.tabBody._position).toBe('left'); }); + + it('should mark the tab body content as a scrollable container', () => { + TestBed + .resetTestingModule() + .configureTestingModule({ + imports: [ + CommonModule, + PortalModule, + MatRippleModule, + NoopAnimationsModule, + ScrollingModule + ], + declarations: [ + MatTabBody, + MatTabBodyPortal, + SimpleTabBodyApp, + ] + }) + .compileComponents(); + + const fixture = TestBed.createComponent(SimpleTabBodyApp); + const tabBodyContent = fixture.nativeElement.querySelector('.mat-mdc-tab-body-content'); + const scrollable = fixture.debugElement.query(By.directive(CdkScrollable)); + + expect(scrollable).toBeTruthy(); + expect(scrollable.nativeElement).toBe(tabBodyContent); + }); }); diff --git a/src/material-experimental/mdc-tabs/tab-group.html b/src/material-experimental/mdc-tabs/tab-group.html index e7369ef899fd..4c51c0224c2f 100644 --- a/src/material-experimental/mdc-tabs/tab-group.html +++ b/src/material-experimental/mdc-tabs/tab-group.html @@ -21,7 +21,8 @@ [class.mdc-tab--active]="selectedIndex == i" [disabled]="tab.disabled" [fitInkBarToContent]="fitInkBarToContent" - (click)="_handleClick(tab, tabHeader, i)"> + (click)="_handleClick(tab, tabHeader, i)" + (cdkFocusChange)="_tabFocusChanged($event, i)">