diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index d7c9e5a24ad6..9d7fcc1c2c12 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -125,9 +125,9 @@ $mat-select-trigger-font-size: 16px !default; padding-top: 0; padding-bottom: 0; max-height: $mat-select-panel-max-height; + min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11 @include cdk-high-contrast { outline: solid 1px; } } - diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index ce39310ce301..82d636b4b262 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -988,37 +988,50 @@ describe('MdSelect', () => { select.style.marginRight = '30px'; }); - it('should align the trigger and the selected option on the x-axis in ltr', () => { - trigger.click(); - fixture.detectChanges(); + it('should align the trigger and the selected option on the x-axis in ltr', async(() => { + fixture.whenStable().then(() => { + fixture.detectChanges(); - const triggerLeft = trigger.getBoundingClientRect().left; - const firstOptionLeft = - document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().left; + trigger.click(); + fixture.detectChanges(); - // Each option is 32px wider than the trigger, so it must be adjusted 16px - // to ensure the text overlaps correctly. - expect(firstOptionLeft.toFixed(2)) - .toEqual((triggerLeft - 16).toFixed(2), + fixture.whenStable().then(() => { + fixture.detectChanges(); + + const triggerLeft = trigger.getBoundingClientRect().left; + const firstOptionLeft = document.querySelector('.cdk-overlay-pane md-option') + .getBoundingClientRect().left; + + // Each option is 32px wider than the trigger, so it must be adjusted 16px + // to ensure the text overlaps correctly. + expect(firstOptionLeft.toFixed(2)).toEqual((triggerLeft - 16).toFixed(2), `Expected trigger to align with the selected option on the x-axis in LTR.`); - }); + }); + }); + })); - it('should align the trigger and the selected option on the x-axis in rtl', () => { + it('should align the trigger and the selected option on the x-axis in rtl', async(() => { dir.value = 'rtl'; + fixture.whenStable().then(() => { + fixture.detectChanges(); - trigger.click(); - fixture.detectChanges(); - - const triggerRight = trigger.getBoundingClientRect().right; - const firstOptionRight = - document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().right; + trigger.click(); + fixture.detectChanges(); - // Each option is 32px wider than the trigger, so it must be adjusted 16px - // to ensure the text overlaps correctly. - expect(firstOptionRight.toFixed(2)) - .toEqual((triggerRight + 16).toFixed(2), - `Expected trigger to align with the selected option on the x-axis in RTL.`); - }); + fixture.whenStable().then(() => { + fixture.detectChanges(); + const triggerRight = trigger.getBoundingClientRect().right; + const firstOptionRight = + document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().right; + + // Each option is 32px wider than the trigger, so it must be adjusted 16px + // to ensure the text overlaps correctly. + expect(firstOptionRight.toFixed(2)) + .toEqual((triggerRight + 16).toFixed(2), + `Expected trigger to align with the selected option on the x-axis in RTL.`); + }); + }); + })); }); describe('x-axis positioning in multi select mode', () => { @@ -1450,13 +1463,13 @@ describe('MdSelect', () => { let testInstance: MultiSelect; let trigger: HTMLElement; - beforeEach(() => { + beforeEach(async(() => { fixture = TestBed.createComponent(MultiSelect); testInstance = fixture.componentInstance; fixture.detectChanges(); trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - }); + })); it('should be able to select multiple values', () => { trigger.click(); @@ -1616,17 +1629,17 @@ describe('MdSelect', () => { expect(trigger.textContent).toContain('Tacos, Pizza, Steak'); }); - it('should throw an exception when trying to set a non-array value', () => { + it('should throw an exception when trying to set a non-array value', async(() => { expect(() => { testInstance.control.setValue('not-an-array'); }).toThrowError(wrappedErrorMessage(new MdSelectNonArrayValueError())); - }); + })); - it('should throw an exception when trying to change multiple mode after init', () => { + it('should throw an exception when trying to change multiple mode after init', async(() => { expect(() => { testInstance.select.multiple = false; }).toThrowError(wrappedErrorMessage(new MdSelectDynamicMultipleError())); - }); + })); it('should pass the `multiple` value to all of the option instances', async(() => { trigger.click();