fix(select): align first option to trigger when it is inside a group (#5153)

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.
This commit is contained in:
Kristiyan Kostadinov
2017-06-23 00:41:52 +02:00
committed by Jeremy Elbourn
parent f9bbbe7952
commit d39cb12929
2 changed files with 16 additions and 2 deletions
+13
View File
@@ -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.');
}));
});
});
+3 -2
View File
@@ -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;
}