Support positioning mat-select panel under the trigger

[takamori]

Bug, feature request, or proposal:

disableOptionCentering as discussed on https://material.angular.io/components/select/api does not appear to have any effect and prevents implementing the "Exposed Dropdown Menu" mentioned at https://material.io/design/components/menus.html#exposed-dropdown-menu .

What is the expected behavior?

Setting disableOptionCentering to true would change the options to appear either below or above the mat-select field.

What is the current behavior?

The options appear over the field, whether or not disableOptionCentering is used.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-khatke
I've tried using


<mat-select placeholder="Favorite food" [disableOptionCentering]="true">

What is the use-case or motivation for changing an existing behavior?

This prevents the ability to implement the Exposed Dropdown Menu.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Repro's at least while using Angular/Material npm 7.0.3 on Chrome 70.0.3538.77 on Mac.

Is there anything else we should know?

[crisbeto]

It does work. You can see the difference in your example if you remove it, select the second option in the select and open it again.

[takamori]

ah.... I didn't notice (or expect) that behavior. That's not quite the same as what I was looking to do, then, since the top choice overlaps the input field, which isn't the way that Exposed Dropdown Menu is spec'd. Is there an appropriate way to implement the Exposed Dropdown Menu from the Material Design spec?

[jelbourn]

It looks like the "exposed dropdown" is a new addition to the spec. @crisbeto we should think about adding an API to support that. It might make sense to deprecate disableOptionCentering and instead have something like a panelPosition property

[TheCom3di4n]

@jelbourn I know that the functionality is a bit like a select, but wouldn't it be nicer to add it to the menu component or even ship it as a standalone component, since there are one or two differences, e.g. the style? This would also help people who read or follow the Material Design Guidelines and then look for the corresponding component in the Angular Material library.

In addition, the exposed dropdown menu also contains also things like a "user input" mode or a "inside a toolbar" mode (...I'm not even sure if you can/should use it outside of such a "toolbar"...), see the "Behaviour" section in the MDG. https://material.io/design/components/menus.html#exposed-dropdown-menu

[takamori]

@TheCom3di4n In my case, I was looking for the select functionality in the Material Design Guidelines, originally starting from "Text fields" and found it under menu, so I'd actually prefer that the Material Design Guideline folks consider at least providing a cross-link in the other direction.

[TheCom3di4n]

@takamori I fully agree with you, I also think that this is more of a select, as I already wrote above, and would feel more comfortable if they would place this component under the select in the Material Design Guidelines, since its behavior rather describes a kind of the native HTML select (...exactly one option can be selected...).

By the way, I find it really unfortunate, for reasons like these, that there is no issue tracker or public forum for the Material Design Guidelines in which you can ask questions or even start and have such discussions. But I guess that's intentional.

[tahaabu]

The workaround for getting the exposed dropdown might just be adding margin in the panelClass.

here's the example: https://stackblitz.com/edit/angular-khatke-8xhpbc?file=styles.css

[kwong-yw]

@tahaabu that visually looks correct, but once the dropdown is activated, you can't click on the menu to close the dropdown– it looks like there's a .cdk-overlay-pane masking most of the menu. Did you ever find a way to get around this?

[Nikolay-Uvarov]

@tahaabu We have faced with the same issue as @kwong-yw .
Can't close dropdown by the arrow or by the area above and to the left in our case.
CSS: margin: 32px 16px;
We can't shift .cdk-overlay-pane because we have another mat-select on the same page.

Fixed(not the final version):

HTML:
<mat-select #mySelect panelClass="server-group-drop-down-list" (openedChange)="openedChange($event)"
TS:
@ViewChild('mySelect') mySelect; ... public openedChange(opened: boolean): void { this.isOpened = opened; } @HostListener("document:click", ["$event.target"]) public onClick(targetElement) { if (this.isOpened) { const element = document.querySelector('.server-group-drop-down-list'); // your mat-select class if (!element.contains(targetElement)) { this.mySelect.close() } } }

I think you can close the dropdown on document click as well.

[akmjenkins]

The real way to fix this, without hacks, is to use the overlayDir property of the select and set it's positions.

https://material.angular.io/cdk/overlay/api

I do this AfterViewInit like this. There may be a better way:

export class SelectComponent implements AfterViewInit {
  @ViewChild(MatSelect) select: MatSelect;

  ngAfterViewInit() {
    this.select.overlayDir.positions = [
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top'
      }
    ];
  }

[petrskalicka]

@akmjenkins Good point, but this option is already deprecated. It becomes private in version 10.