垫自动完成宽度不能随输入主机上的动态宽度调整

时间:2019-03-25 19:43:49

标签: css angular angular-material

我有一个mat-form-field,内部有标准输入,并附加了mat-autocomplete。

    <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-field上,当应用以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

1 个答案:

答案 0 :(得分:1)

在这种情况下,有两个事件,一个是打开mat-autocomplete的事件,另一个是由您的第一次搜索键触发的事件。

第一个通过_attachOverlay()创建覆盖,因为if (!overlayRef)等于true https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L594'

,由于覆盖层已经存在,第二个触发else的{​​{1}}条件。

  

//如果有任何更改,请更新触发器,面板宽度和方向。

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

每个事件都呼叫_attachOverlay()

_attachOverlay()

这两个都不是连续的更新“流”,两个条件都被设计为单一事件。


您可以利用 /** Opens the autocomplete suggestion panel. */ openPanel(): void { this._attachOverlay(); this._floatLabel(); } 上的panelWidth输入并指定mat-autocomplete的宽度

270px

这不会使宽度随着过渡而自动调整大小,但是,如果要对其进行动画处理,则需要探索覆盖<mat-autocomplete #auto="matAutocomplete" panelWidth="270px"> 或编写自己的解决方案。