Ширина автозаполнения Mat не корректируется с динамической шириной на входном хосте

Question

У меня есть поле mat-form со стандартным вводом внутри него и прикрепленное автозаполнение mat.

    <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>

В поле mat-form я добавил ширину перехода при применении класса, сфокусированного на mat:

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

Однако я сталкиваюсь с проблемами с определением размера шириныпанели автозаполнения, когда ввод входит и не в фокусе.Панель автозаполнения, кажется, действительно не догоняет правильную ширину, пока пользователь не наберет текст.В документах по угловым материалам я не нашел метода или входных данных, в которых можно было бы обновить автозаполнение до нужного размера.Похоже, что ловит размер на входе в разных точках процесса перехода.

Любая помощь / предложения будут высоко оценены

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

Answer 1

В этом сценарии есть два события: одно событие, открывающее mat-autocomplete, и другое событие, вызванное вашим первым нажатием клавиши поиска.

Первый создает оверлей через _attachOverlay(), так как if (!overlayRef) равно true https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L594'

, а вторая вызывает условие else _attachOverlay(), поскольку наложение уже существует.

// Обновите триггер, ширину и направление панели, если что-то изменилось.

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

Звонки _attachOverlay() с каждым событием.

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

Ни один из которых не является непрерывным «потоком» обновлений, оба условия предназначены для единичных событий.

---

Вы можете использовать panelWidth для ввода mat-autocomplete и указать ширину 270px

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

Это не сделает ширину автоматически изменяемой с вашим переходом, однако, если вы хотите анимировать ее, вам нужно будет изучить переопределение mat-autocomplete или написать собственное решение.