feat(material/select): add option to enable inlined overlay

Author: adolgachev

src/dev-app/select/select-demo.html

@@ -11,7 +11,7 @@
                       [class.demo-drinks-width-large]="drinksWidth === '400px'">
         <mat-label>Drink</mat-label>
         <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
-          [disabled]="drinksDisabled" #drinkControl="ngModel">
+          [disabled]="drinksDisabled" overlayInlined #drinkControl="ngModel">
           <mat-option [disabled]="drinksOptionsDisabled === 'all'">None</mat-option>
           @for (drink of drinks; track drink; let index = $index) {
             <mat-option [value]="drink.value"
@@ -73,7 +73,7 @@
     <mat-card-content>
       <mat-form-field [color]="pokemonTheme">
         <mat-label>Pokemon</mat-label>
-        <mat-select multiple [(ngModel)]="currentPokemon"
+        <mat-select multiple overlayInlined [(ngModel)]="currentPokemon"
           [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
           @for (creature of pokemon; track creature) {
             <mat-option [value]="creature.value" [disabled]="pokemonOptionsDisabled">
@@ -108,7 +108,7 @@
     <mat-card-content>
       <mat-form-field>
         <mat-label>Digimon</mat-label>
-        <mat-select [(value)]="currentDigimon">
+        <mat-select overlayInlined [(value)]="currentDigimon">
           <mat-option>None</mat-option>
           @for (creature of digimon; track creature) {
             <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
@@ -129,7 +129,7 @@
     <mat-card-content>
       <mat-form-field>
         <mat-label>Pokemon</mat-label>
-        <mat-select [(ngModel)]="currentPokemonFromGroup">
+        <mat-select overlayInlined [(ngModel)]="currentPokemonFromGroup">
           @for (group of pokemonGroups; track group) {
             <mat-optgroup [label]="group.name" [disabled]="group.disabled">
               @for (creature of group.pokemon; track creature) {
@@ -151,6 +151,7 @@
         <mat-select [(ngModel)]="currentDrinkObject"
                     [required]="drinkObjectRequired"
                     [compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
+                    overlayInlined
                     #drinkObjectControl="ngModel">
           @for (drink of drinks; track drink) {
             <mat-option [value]="drink" [disabled]="drink.disabled">{{ drink.viewValue }}</mat-option>
@@ -179,7 +180,7 @@
       <p>
         <mat-form-field appearance="fill">
           <mat-label>Fill</mat-label>
-          <mat-select [(value)]="currentAppearanceValue">
+          <mat-select overlayInlined [(value)]="currentAppearanceValue">
             <mat-option>None</mat-option>
             @for (creature of digimon; track creature) {
               <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
@@ -191,7 +192,7 @@
       <p>
         <mat-form-field appearance="outline">
           <mat-label>Outline</mat-label>
-          <mat-select [(value)]="currentAppearanceValue">
+          <mat-select overlayInlined [(value)]="currentAppearanceValue">
             <mat-option>None</mat-option>
             @for (creature of digimon; track creature) {
               <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
@@ -212,7 +213,7 @@
         <mat-card-content>
           <mat-form-field>
             <mat-label>Food I would like to eat</mat-label>
-            <mat-select [formControl]="foodControl">
+            <mat-select overlayInlined [formControl]="foodControl">
               @for (food of foods; track food) {
                 <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
               }
@@ -238,7 +239,7 @@
         <mat-card-content>
           <mat-form-field>
             <mat-label>Starter pokemon</mat-label>
-            <mat-select (selectionChange)="latestChangeEvent = $event">
+            <mat-select overlayInlined (selectionChange)="latestChangeEvent = $event">
               @for (creature of pokemon; track creature) {
                 <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
               }
@@ -387,7 +388,7 @@ <h4>Error message with errorStateMatcher</h4>
     <p class="demo-narrow-sandwich">
       <mat-form-field>
         <mat-label>Bread</mat-label>
-        <mat-select [(ngModel)]="sandwichBread"
+        <mat-select overlayInlined [(ngModel)]="sandwichBread"
           [hideSingleSelectionIndicator]="sandwichHideSingleSelectionIndicator">
           @for (bread of breads; track bread) {
             <mat-option [value]="bread.value">{{ bread.viewValue }}</mat-option>
@@ -396,7 +397,7 @@ <h4>Error message with errorStateMatcher</h4>
       </mat-form-field>
       <mat-form-field>
         <mat-label>Meat</mat-label>
-        <mat-select [(ngModel)]="sandwichMeat"
+        <mat-select overlayInlined [(ngModel)]="sandwichMeat"
           [hideSingleSelectionIndicator]="sandwichHideSingleSelectionIndicator">
           @for (meat of meats; track meat) {
             <mat-option [value]="meat.value">{{ meat.viewValue }}</mat-option>
@@ -405,7 +406,7 @@ <h4>Error message with errorStateMatcher</h4>
       </mat-form-field>
       <mat-form-field>
         <mat-label>Cheese</mat-label>
-        <mat-select [(ngModel)]="sandwichCheese"
+        <mat-select overlayInlined [(ngModel)]="sandwichCheese"
           [hideSingleSelectionIndicator]="sandwichHideSingleSelectionIndicator">
           @for (cheese of cheeses; track cheese) {
             <mat-option [value]="cheese.value">{{ cheese.viewValue }}</mat-option>

src/material/select/select.html

@@ -40,6 +40,7 @@
   [cdkConnectedOverlayPositions]="_positions"
   [cdkConnectedOverlayWidth]="_overlayWidth"
   [cdkConnectedOverlayFlexibleDimensions]="true"
+  [cdkConnectedOverlayInsertAfter]="inlineOverlayAfter"
   (detach)="close()"
   (backdropClick)="close()"
   (overlayKeydown)="_handleOverlayKeydown($event)">

src/material/select/select.ts

@@ -346,7 +346,7 @@ export class MatSelect
   _keyManager: ActiveDescendantKeyManager<MatOption>;
 
   /** Ideal origin for the overlay panel. */
-  _preferredOverlayOrigin: CdkOverlayOrigin | ElementRef | undefined;
+  _preferredOverlayOrigin: ElementRef | undefined;
 
   /** Width of the overlay panel. */
   _overlayWidth: string | number;
@@ -555,6 +555,12 @@ export class MatSelect
   @Input({transform: booleanAttribute})
   canSelectNullableOptions: boolean = this._defaultOptions?.canSelectNullableOptions ?? false;
 
+  /**
+   * Whether to inline the overlay, instead of using the global overlay container.
+   */
+  @Input({transform: booleanAttribute})
+  overlayInlined: boolean;
+
   /** Combined stream of all of the child options' change events. */
   readonly optionSelectionChanges: Observable<MatOptionSelectionChange> = defer(() => {
     const options = this.options;
@@ -948,6 +954,11 @@ export class MatSelect
     return this._selectionModel.selected[0].viewValue;
   }
 
+  /** Whether to inline the overlay and after which element. */
+  get inlineOverlayAfter(): ElementRef | undefined {
+    return this.overlayInlined ? this._parentFormField?.getConnectedOverlayOrigin() : undefined;
+  }
+
   /** Refreshes the error state of the select. */
   updateErrorState() {
     this._errorStateTracker.updateErrorState();