mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
Jeremy Elbourn
parent
f9bbbe7952
commit
d39cb12929
@@ -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.');
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user