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

Author: adolgachev

goldens/material/autocomplete/index.api.md

@@ -174,6 +174,8 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     // (undocumented)
     static ngAcceptInputType_autocompleteDisabled: unknown;
     // (undocumented)
+    static ngAcceptInputType_overlayInlined: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
@@ -183,6 +185,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     _onTouched: () => void;
     openPanel(): void;
     readonly optionSelections: Observable<MatOptionSelectionChange>;
+    overlayInlined: boolean;
     readonly _overlayPanelClass: string[];
     get panelClosingActions(): Observable<MatOptionSelectionChange | null>;
     get panelOpen(): boolean;
@@ -197,7 +200,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     // (undocumented)
     writeValue(value: any): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "overlayInlined": { "alias": "matAutocompleteOverlayInlined"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteTrigger, never>;
 }

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,
     });
   }