ngx-perfect-scrollbar can be used on angular material elements?

Question

I would like to add perfect scrollbar on the mat-autocomplete element. Is it possible to add ngx perfect scrollbar on angular material elements?

Answer 1

This is how I added it, but for some reason it works in Chrome, but in Firefox it does not. If I inspect the elements with Firefox and expand the overlay div, then the scrollbar works also, but only after I expand that node. If you find a solution to this let me know.

    <mat-form-field>
       <mat-chip-list #chipList>
       <mat-chip *ngFor="let item of itemsSelected"
              [selectable]="true"
              [removable]="true"
              (removed)="remove(item)">
         {{item}}
         <mat-icon matChipRemove>cancel</mat-icon>
       </mat-chip>
       <input placeholder="{{placeholder | translate}}"
           #itemInput
           [formControl]="itemCtrl"
           [matAutocomplete]="auto"
           [matChipInputFor]="chipList"
           [matChipInputAddOnBlur]="true">
       </mat-chip-list>
       <mat-autocomplete #auto="matAutocomplete" 
                         (optionSelected)="selected($event)" 
                         (opened)="matAutocompleteOpened()"
                         class="overflow-hidden">
          <perfect-scrollbar>
              <mat-option #matOption *ngFor="let item of filteredItems | async" [value]="item">
                 {{item}}
              </mat-option>
          </perfect-scrollbar>

       </mat-autocomplete>
    </mat-form-field>

And the CSS

.mat-autocomplete-panel.overflow-hidden {
     overflow: hidden !important;
     position: relative !important;

    .ps__rail-y:hover {
         background-color: transparent !important;
    }
}

With

@Component({
  ------
  encapsulation: ViewEncapsulation.None
})