Mat-autocomplete width doesn't adjust with dynamic width on input host

Question

I have a mat-form-field with a standard input inside of it and a mat-autocomplete attached.

    <mat-form-field appearance="fill">
    <mat-label>{{ 'INVENTORY.areaOfBusiness' | translate }}</mat-label>
    <input type="text" matInput
    [matAutocomplete]="businessAreaAuto"
    (keyup)="search($event, 'businessArea')"
    [(ngModel)]="businessArea">
    <mat-icon matSuffix>add</mat-icon>
    <mat-autocomplete #businessAreaAuto="matAutocomplete" (optionSelected)="businessSelection($event)">
      <mat-option *ngIf="bizNoResults === true" class="no-click">{{ 'INVENTORY.no-result' | translate }}</mat-option>
      <mat-option *ngIf="isSearchBiz === true">
        <div class="desktop-spinner">
          <span>{{ 'INVENTORY.searching' | translate }}...</span>     
          <mat-progress-spinner
            diameter = 20
            mode = "indeterminate"
            [value]="value">
          </mat-progress-spinner>
        </div>
      </mat-option>
      <mat-option 
        *ngFor="let bizArea of businessAreaResults | async"
        [value]="bizArea"
        matTooltip="{{bizArea}}">
        {{bizArea}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

On the mat-form-field I have added a transition width when the mat-focused class is applied:

    mat-form-field {
    margin-left: 24px;
    font-size: 14px;
    width: 170px;
    transition: width .5s ease;
  }
  .mat-focused {
    width: 270px;
  }

However I am running into issues with the width sizing of the autocomplete panel when the input goes in and out of focus. The autocomplete panel doesn't seem to truly catch up with the proper width until the user is typing in text. I haven't found a method or input in the angular material docs that has a good way to update the autocomplete with the correct size. It seems to be catching the size on the input at different points of the transition process.

Any help/suggestions would be much appreciated

stackblitz https://stackblitz.com/edit/angular-yfxr8y

Marshal Marshal · Accepted Answer · 2019-03-25T21:13:39

There are two events in this scenario, one event to open the mat-autocomplete, and another event triggered by your first key stroke of the search.

The first creates the overlay via _attachOverlay() as if (!overlayRef) equals to true https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L594'

and the second triggers the else condition of _attachOverlay() as the overlay already exists.

// Update the trigger, panel width and direction, in case anything has changed.

https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L601

Calls _attachOverlay() with each event.

 /** Opens the autocomplete suggestion panel. */
  openPanel(): void {
    this._attachOverlay();
    this._floatLabel();
  }

Neither of which are a continuous "stream" of updates, both conditions are designed to be singular events.

You could leverage panelWidth input on mat-autocomplete and specify your width of 270px

<mat-autocomplete #auto="matAutocomplete" panelWidth="270px">

This will not make the width autosize with your transition however, if you wish to animate it, you will need to explore overriding the mat-autocomplete or write your own solution.

Mat-autocomplete width doesn't adjust with dynamic width on input host

1 Answers