Изменение местоположения автозаполнения матом при изменении местоположения ввода - PullRequest
Новая
       11

Изменение местоположения автозаполнения матом при изменении местоположения ввода

1 голос
/ 20 мая 2019

Я использую mat-autocomplete (angular-material 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>

Ожидаемое поведение, которое я ищу, это всегда иметь выпадающий список автозаполнения под входом.

...