我使用的是mat-autocomplete(角度材料v.5.2.5),当输入位置移动时(因为文本已添加到父div中),自动完成下拉列表的位置不会更改。
我尝试使用cdkScrollable,并尝试将输入元素更改为文本区域。
<mat-form-field>
<mat-chip-list #chipList class="autocomplete-form-field-list">
<div class="list-wrapper" cdkScrollable>
<input
matInput
[matChipInputFor]="chipList"
#autoCompleteInput
[matAutocomplete]="auto"
[ngStyle]="{'max-width': autoCompleteInput.value.length + 1+ 'ch'}"
class="autocompleteInput"
type="text"
[placeholder]="placeholder"
[id]="id"
[value]="value"
[formControl]="searchTerm"
(keyup)="onKeyUp($event)"
[ngClass]="{'validation-error-border': patternError}"
(click)='openPanel($event)'>
<i *ngIf="value" class="o_search_no_color_icon autocomplete-cross-search"></i>
</div>
<mat-autocomplete #auto="matAutocomplete" #autocomplete>
<mat-option *ngFor="let item of searchResult" [disabled]="item.isCategory && isTopicSearch" [value]="item"
[title]="item.displayName" (onSelectionChange)="onSelect(item)">
<my-checkbox
*ngIf="item.isCategory"
class="catagoryName"
[id]="item.displayName"
[displayName]="item.displayName"
(onSingleCheckBoxChange)="nodeClicked($event)"
[checked]="isChecked(item.displayName)">
</my-checkbox>
<my-checkbox
*ngIf="!item.isCategory"
class="catagoryItem"
[id]="item.displayName"
[displayName]="item.displayName"
(onSingleCheckBoxChange)="nodeClicked($event)"
[checked]="isChecked(item.displayName)">
</my-checkbox>
</mat-option>
<mat-option *ngIf="searchResult.length == 0 && searchTerm.value">
<span>No matches found for {{currValue}}</span>
</mat-option>
</mat-autocomplete>
</mat-chip-list>
</mat-form-field>
我正在寻找的预期行为是始终在输入下方包含自动完成下拉列表。