From b1087743b87d382a342cef27d20460fe63bddeb6 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 15 Jun 2017 22:32:22 +0200 Subject: [PATCH] fix(select): align first option to trigger when it is inside a group Previously, if a select had no value and the first option was in a group, the group label would go over the trigger, instead of the first option. These changes correct the behavior so the first option is always over the trigger. --- src/lib/select/select.spec.ts | 13 +++++++++++++ src/lib/select/select.ts | 5 +++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 626e02bf0ad4..e90a0acabb5c 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1457,6 +1457,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 7be1cf9f60e8..d07312c3d09b 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -799,7 +799,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); @@ -874,7 +875,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; }