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

Author: adolgachev

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

@@ -12,6 +12,7 @@
         #reactiveInput
         matInput
         [matAutocomplete]="reactiveAuto"
+        [matAutocompleteOverlayInlined]="true"
         [formControl]="stateCtrl"
         (input)="reactiveStates = filterStates(reactiveInput.value)"
         (focus)="reactiveStates = filterStates(reactiveInput.value)">
@@ -71,7 +72,7 @@
     @if (true) {
       <mat-form-field [color]="templateStatesTheme">
         <mat-label>State</mat-label>
-        <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
+        <input matInput [matAutocomplete]="tdAuto" [matAutocompleteOverlayInlined]="true" [(ngModel)]="currentState"
           (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
         <mat-autocomplete #tdAuto="matAutocomplete"
           [hideSingleSelectionIndicator]="templateHideSingleSelectionIndicator"
@@ -132,6 +133,7 @@
       <input
         matInput
         [matAutocomplete]="groupedAuto"
+        [matAutocompleteOverlayInlined]="true"
         [(ngModel)]="currentGroupedState"
         (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">
     </mat-form-field>

src/dev-app/autocomplete/autocomplete-demo.ts

@@ -221,7 +221,9 @@ export class AutocompleteDemo {
       <p>Choose a T-shirt size.</p>
       <mat-form-field>
         <mat-label>T-Shirt Size</mat-label>
-        <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentSize" name="size">
+        <input 
+          matInput [matAutocomplete]="tdAuto" [matAutocompleteOverlayInlined]="true" 
+          [(ngModel)]="currentSize" name="size">
         <mat-autocomplete #tdAuto="matAutocomplete">
           @for (size of sizes; track size) {
             <mat-option [value]="size">{{size}}</mat-option>

src/material/autocomplete/autocomplete-trigger.ts

@@ -224,6 +224,12 @@ export class MatAutocompleteTrigger
    */
   @Input('matAutocompletePosition') position: 'auto' | 'above' | 'below' = 'auto';
 
+  /**
+   * Whether to inline the overlay, instead of using the global overlay container.
+   */
+  @Input({alias: 'matAutocompleteOverlayInlined', transform: booleanAttribute})
+  overlayInlined: boolean;
+
   /**
    * Reference relative to which to position the autocomplete panel.
    * Defaults to the autocomplete trigger element.
@@ -894,6 +900,7 @@ export class MatAutocompleteTrigger
       backdropClass: this._defaults?.backdropClass || 'cdk-overlay-transparent-backdrop',
       panelClass: this._overlayPanelClass,
       disableAnimations: this._animationsDisabled,
+      insertOverlayAfter: this.overlayInlined ? this._getConnectedElement() : undefined,
     });
   }