From 84d032bc4508331f19df0683c89295c3a95810ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81da=CC=81m=20Kocsis?= <kocccs@gmail.com>
Date: Wed, 27 Jan 2021 09:21:19 +0100
Subject: [PATCH] fix(material/select): overlay offset calculation for disabled
 option centering

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
---
 scripts/check-mdc-tests-config.ts  |  3 ++-
 src/material/select/select.spec.ts | 19 +++++++++++++++++++
 src/material/select/select.ts      |  2 ++
 3 files changed, 23 insertions(+), 1 deletion(-)

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<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;