diff --git a/scripts/check-mdc-tests-config.ts b/scripts/check-mdc-tests-config.ts index 9248853d786f..3d8a32cb8a2b 100644 --- a/scripts/check-mdc-tests-config.ts +++ b/scripts/check-mdc-tests-config.ts @@ -172,7 +172,8 @@ export const config = { 'should adjust for the group padding in ltr', 'should adjust for the group padding in rtl', 'should not adjust if all options are within a group, except the selected one', - 'should align the first option to the trigger, if nothing is selected' + 'should align the first option to the trigger, if nothing is selected', + 'should not adjust if option centering is disabled any option under a group is selected' ], 'mdc-slide-toggle': [ // These tests are verifying implementation details that are not relevant for MDC. diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts index 73ca9fd7b3c5..f5dee4920b2a 100644 --- a/src/material/select/select.spec.ts +++ b/src/material/select/select.spec.ts @@ -4225,6 +4225,25 @@ describe('MatSelect', () => { .toBe(Math.floor(triggerTop), 'Expected trigger to align with the first option.'); } })); + + it('should not adjust if option centering is disabled any option under a group is selected', + fakeAsync(() => { + groupFixture.componentInstance.select.disableOptionCentering = true; + groupFixture.componentInstance.control.setValue('oddish-1'); + groupFixture.detectChanges(); + + trigger.click(); + groupFixture.detectChanges(); + flush(); + + const selected = document.querySelector('.cdk-overlay-pane mat-option.mat-selected')!; + const selectedOptionLeft = selected.getBoundingClientRect().left; + const triggerLeft = trigger.getBoundingClientRect().left; + + // 16px is the default option padding + expect(Math.floor(selectedOptionLeft)).toEqual(Math.floor(triggerLeft - 16)); + }) + ); }); }); diff --git a/src/material/select/select.ts b/src/material/select/select.ts index cfcc0a5e5296..391bd3373fa2 100644 --- a/src/material/select/select.ts +++ b/src/material/select/select.ts @@ -1282,6 +1282,8 @@ export class MatSelect extends _MatSelectBase implements OnInit // Adjust the offset, depending on the option padding. if (this.multiple) { offsetX = SELECT_MULTIPLE_PANEL_PADDING_X; + } else if (this.disableOptionCentering) { + offsetX = SELECT_PANEL_PADDING_X; } else { let selected = this._selectionModel.selected[0] || this.options.first; offsetX = selected && selected.group ? SELECT_PANEL_INDENT_PADDING_X : SELECT_PANEL_PADDING_X;