bug(mat-select): Option overlay is misaligned if 'disableOptionCentering' is true and selected/first option is under an options group

[koccs]

Reproduction

Example: https://stackblitz.com/edit/angular-vzpglv

Steps to reproduce:

1. Create a mat-select with enabled disableOptionCentering
2. Add options with option groups
3. Select one of the options under a group (if the first one is not under a group)
4. Open options again
5. The options overlay is misaligned to the left (in ltr) because of the SELECT_PANEL_INDENT_PADDING_X here: https://github.com/angular/components/blob/master/src/material/select/select.ts#L1287

Expected Behavior

If the disableOptionCentering is turned on then the _calculateOverlayOffsetX() method should use the SELECT_PANEL_PADDING_X even if the first/selected option is under a group.

Actual Behavior

_calculateOverlayOffsetX() method uses the SELECT_PANEL_INDENT_PADDING_X every time if the first/selected option is under a group.

Environment

• Angular: 10, 11
• CDK/Material: 10, 11
• Browser(s): Chrome 87, Firefox 84
• Operating System (e.g. Windows, macOS, Ubuntu): macOS, Windows

This seems easy to fix with and additional condition in the _calculateOverlayOffsetX() like if(this.multiple). If you guys agree with my assumptions I would like to fix it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}