diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index ba1c7ee3c99..280edf112b7 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1456,6 +1456,19 @@ describe('MdSelect', () => { expect(Math.floor(selectedOptionLeft)).toEqual(Math.floor(triggerLeft - 16)); })); + it('should align the first option to the trigger, if nothing is selected', fakeAsync(() => { + trigger.click(); + groupFixture.detectChanges(); + + const triggerTop = trigger.getBoundingClientRect().top; + const optionTop = overlayContainerElement.querySelector('.cdk-overlay-pane md-option') + .getBoundingClientRect().top; + + // Since the option is 18px higher than the trigger, it needs to be adjusted by 9px. + expect(Math.floor(optionTop)) + .toBe(Math.floor(triggerTop - 9), 'Expected trigger to align with the first option.'); + })); + }); }); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index e00d54ef182..642fae370e3 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -788,7 +788,8 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On // we must only adjust for the height difference between the option element // and the trigger element, then multiply it by -1 to ensure the panel moves // in the correct direction up the page. - this._offsetY = (SELECT_ITEM_HEIGHT - SELECT_TRIGGER_HEIGHT) / 2 * -1; + this._offsetY = (SELECT_ITEM_HEIGHT - SELECT_TRIGGER_HEIGHT) / 2 * -1 - + (this._getLabelCountBeforeOption(0) * SELECT_ITEM_HEIGHT); } this._checkOverlayWithinViewport(maxScroll); @@ -863,7 +864,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On if (this.multiple) { offsetX = SELECT_MULTIPLE_PANEL_PADDING_X; } else { - let selected = this._selectionModel.selected[0]; + let selected = this._selectionModel.selected[0] || this.options.first; offsetX = selected && selected.group ? SELECT_PANEL_INDENT_PADDING_X : SELECT_PANEL_PADDING_X; }