CSS issue in mat-autocomplete Angular-7

Question

I am using mat-autocomplete in that when i select the dropdown and scroll the main bar then that dropbox is not moving with autocomplete input field. enter image description here

code:

<td width = 24% *ngIf="!stock.value.status_item">
    <input style="width: 167px;" type="text" placeholder="Select Item"   #editInput  tabindex="1" class="form-control"
      matInput [matAutocomplete]="itemsAuto" [(ngModel)]="stock?.value.commodity_name" [ngModelOptions]="{standalone:true}"  [disabled]=" stock.value.confirm_status" (input)="onSearch(stock?.value.commodity_name)" >
    <mat-autocomplete  #itemsAuto="matAutocomplete"  (opened)="autocompleteScroll()">
      <mat-option *ngFor="let item of ingredients" [value]="item.name"  [disabled]="!isItemAvailable(item)" (click)="addStockManully(item,i)">
          {{item?.name}}
            <span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvO" *ngIf="!isItemAvailable(item)">
              </span>
              <span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvOs" *ngIf="isItemAvailable(item)">
                </span>
      </mat-option>
    </mat-autocomplete>
  </td>

can you please tell how to disable side bar scroll when i click the dropdown box of autocomplete — Arjun Nair, Jul 17 '20 at 09:02

score 0 · Answer 1 · answered Jul 17 '20 at 09:09

the behavior is not wrong, Once the dropbox is rendered be it for the mat-select of mat-autocomplete, once it is rendered it would not move its position.

So one thing you can do here is that, after selecting one of the options in the dropdown. You can close the dropbox and then scroll the main bar.

Or you can just close the dropbox on the blur property of the input. So when you do something else it would immediately close the list shown in the dropdown.

can you provide an example – Arjun Nair Jul 17 '20 at 10:00 — Arjun Nair, Jul 17 '20 at 10:00

CSS issue in mat-autocomplete Angular-7

1 Answers1