fix(material/select): global option not disabling popover (angular#32610)

Fixes that disabling popovers globally wasn't doing so for `mat-select`.

Relates to angular#32592 (comment).

Author: crisbeto

goldens/material/paginator/index.api.md

@@ -21,6 +21,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { DoCheck } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
+import { FlexibleOverlayPopoverLocation } from '@angular/cdk/overlay';
 import { FocusableOption } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { FormGroupDirective } from '@angular/forms';

goldens/material/select/index.api.md

@@ -20,6 +20,7 @@ import { ControlValueAccessor } from '@angular/forms';
 import { DoCheck } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
+import { FlexibleOverlayPopoverLocation } from '@angular/cdk/overlay';
 import { FocusableOption } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { FormGroupDirective } from '@angular/forms';
@@ -340,6 +341,8 @@ export class MatSelect implements AfterContentInit, OnChanges, OnDestroy, OnInit
     protected _parentFormField: MatFormField | null;
     get placeholder(): string;
     set placeholder(value: string);
+    // (undocumented)
+    protected _popoverLocation: FlexibleOverlayPopoverLocation | null;
     _positions: ConnectedPosition[];
     _preferredOverlayOrigin: CdkOverlayOrigin | ElementRef | undefined;
     registerOnChange(fn: (value: any) => void): void;

src/material/select/select.html

@@ -1,9 +1,10 @@
-<div cdk-overlay-origin
-     class="mat-mdc-select-trigger"
-     (click)="open()"
-     #fallbackOverlayOrigin="cdkOverlayOrigin"
-     #trigger>
-
+<div
+  cdk-overlay-origin
+  class="mat-mdc-select-trigger"
+  (click)="open()"
+  #fallbackOverlayOrigin="cdkOverlayOrigin"
+  #trigger
+>
   <div class="mat-mdc-select-value" [attr.id]="_valueId">
     @if (empty) {
       <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{placeholder}}</span>
@@ -22,7 +23,7 @@
     <div class="mat-mdc-select-arrow">
       <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
       <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
-        <path d="M7 10l5 5 5-5z"/>
+        <path d="M7 10l5 5 5-5z" />
       </svg>
     </div>
   </div>
@@ -40,10 +41,11 @@
   [cdkConnectedOverlayPositions]="_positions"
   [cdkConnectedOverlayWidth]="_overlayWidth"
   [cdkConnectedOverlayFlexibleDimensions]="true"
-  cdkConnectedOverlayUsePopover="inline"
+  [cdkConnectedOverlayUsePopover]="_popoverLocation"
   (detach)="close()"
   (backdropClick)="close()"
-  (overlayKeydown)="_handleOverlayKeydown($event)">
+  (overlayKeydown)="_handleOverlayKeydown($event)"
+>
   <div
     #panel
     role="listbox"
@@ -55,7 +57,8 @@
     [attr.aria-label]="ariaLabel || null"
     [attr.aria-labelledby]="_getPanelAriaLabelledby()"
     [ngClass]="panelClass"
-    (keydown)="_handleKeydown($event)">
+    (keydown)="_handleKeydown($event)"
+  >
     <ng-content></ng-content>
   </div>
 </ng-template>

src/material/select/select.ts

@@ -31,6 +31,8 @@ import {
   CdkOverlayOrigin,
   ConnectedPosition,
   createRepositionScrollStrategy,
+  FlexibleOverlayPopoverLocation,
+  OVERLAY_DEFAULT_CONFIG,
   ScrollStrategy,
 } from '@angular/cdk/overlay';
 import {ViewportRuler} from '@angular/cdk/scrolling';
@@ -210,6 +212,7 @@ export class MatSelect
   private _liveAnnouncer = inject(LiveAnnouncer);
   protected _defaultOptions = inject(MAT_SELECT_CONFIG, {optional: true});
   protected _animationsDisabled = _animationsDisabled();
+  protected _popoverLocation: FlexibleOverlayPopoverLocation | null;
   private _initialized = new Subject();
   private _cleanupDetach: (() => void) | undefined;
 
@@ -602,6 +605,7 @@ export class MatSelect
     const parentForm = inject(NgForm, {optional: true});
     const parentFormGroup = inject(FormGroupDirective, {optional: true});
     const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});
+    const defaultPopoverConfig = inject(OVERLAY_DEFAULT_CONFIG, {optional: true});
 
     if (this.ngControl) {
       // Note: we provide the value accessor through here, instead of
@@ -622,8 +626,10 @@ export class MatSelect
       parentForm,
       this.stateChanges,
     );
+
     this._scrollStrategy = this._scrollStrategyFactory();
     this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0;
+    this._popoverLocation = defaultPopoverConfig?.usePopover === false ? null : 'inline';
 
     // Force setter to be called in case id was not specified.
     this.id = this.id;