diff --git a/goldens/material/paginator/index.api.md b/goldens/material/paginator/index.api.md index 5ab41274a447..9c2af36ee2de 100644 --- a/goldens/material/paginator/index.api.md +++ b/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'; diff --git a/goldens/material/select/index.api.md b/goldens/material/select/index.api.md index d0975c05859a..04382362d004 100644 --- a/goldens/material/select/index.api.md +++ b/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; diff --git a/src/material/select/select.html b/src/material/select/select.html index ba6439f3fe45..6d89042dbeb2 100644 --- a/src/material/select/select.html +++ b/src/material/select/select.html @@ -1,9 +1,10 @@ -
- +
@if (empty) { {{placeholder}} @@ -22,7 +23,7 @@
@@ -40,10 +41,11 @@ [cdkConnectedOverlayPositions]="_positions" [cdkConnectedOverlayWidth]="_overlayWidth" [cdkConnectedOverlayFlexibleDimensions]="true" - cdkConnectedOverlayUsePopover="inline" + [cdkConnectedOverlayUsePopover]="_popoverLocation" (detach)="close()" (backdropClick)="close()" - (overlayKeydown)="_handleOverlayKeydown($event)"> + (overlayKeydown)="_handleOverlayKeydown($event)" +>
+ (keydown)="_handleKeydown($event)" + >
diff --git a/src/material/select/select.ts b/src/material/select/select.ts index fa395a5bbd1c..222ec39293b6 100644 --- a/src/material/select/select.ts +++ b/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;