Skip to content

Commit d39cb12

Browse files
crisbetojelbourn
authored andcommitted
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.
1 parent f9bbbe7 commit d39cb12

File tree

2 files changed

+16
-2
lines changed

2 files changed

+16
-2
lines changed

src/lib/select/select.spec.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1456,6 +1456,19 @@ describe('MdSelect', () => {
14561456
expect(Math.floor(selectedOptionLeft)).toEqual(Math.floor(triggerLeft - 16));
14571457
}));
14581458

1459+
it('should align the first option to the trigger, if nothing is selected', fakeAsync(() => {
1460+
trigger.click();
1461+
groupFixture.detectChanges();
1462+
1463+
const triggerTop = trigger.getBoundingClientRect().top;
1464+
const optionTop = overlayContainerElement.querySelector('.cdk-overlay-pane md-option')
1465+
.getBoundingClientRect().top;
1466+
1467+
// Since the option is 18px higher than the trigger, it needs to be adjusted by 9px.
1468+
expect(Math.floor(optionTop))
1469+
.toBe(Math.floor(triggerTop - 9), 'Expected trigger to align with the first option.');
1470+
}));
1471+
14591472
});
14601473

14611474
});

src/lib/select/select.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -788,7 +788,8 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
788788
// we must only adjust for the height difference between the option element
789789
// and the trigger element, then multiply it by -1 to ensure the panel moves
790790
// in the correct direction up the page.
791-
this._offsetY = (SELECT_ITEM_HEIGHT - SELECT_TRIGGER_HEIGHT) / 2 * -1;
791+
this._offsetY = (SELECT_ITEM_HEIGHT - SELECT_TRIGGER_HEIGHT) / 2 * -1 -
792+
(this._getLabelCountBeforeOption(0) * SELECT_ITEM_HEIGHT);
792793
}
793794

794795
this._checkOverlayWithinViewport(maxScroll);
@@ -863,7 +864,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
863864
if (this.multiple) {
864865
offsetX = SELECT_MULTIPLE_PANEL_PADDING_X;
865866
} else {
866-
let selected = this._selectionModel.selected[0];
867+
let selected = this._selectionModel.selected[0] || this.options.first;
867868
offsetX = selected && selected.group ? SELECT_PANEL_INDENT_PADDING_X : SELECT_PANEL_PADDING_X;
868869
}
869870

0 commit comments

Comments
 (0)