fix(material/select): overlay offset calculation for disabled option …

…centering (#21716)

Fixes a the overlay offset calculation for grouped option values if disableOptionCentering is true.
The overlay should not have double offset value for any selected option to keep it under the
trigger element.

Fixes #21570

(cherry picked from commit da1f7e7)

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.

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));
+        })
+      );
     });
   });
 

src/material/select/select.ts

@@ -1282,6 +1282,8 @@ export class MatSelect extends _MatSelectBase<MatSelectChange> 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;