fix: virtual scroll bounce (#115)

Author: bobbyg603

projects/ngb-filterable-dropdown-example/src/app/app.component.html

@@ -132,6 +132,7 @@ <h3>Lots and Lots of Items</h3>
         [autoClose]="autoClose"
         [disabled]="disabled"
         [items]="lotsOfItems"
+        [itemHeight]="50"
         [loading]="loading"
         [searchInputPlaceholder]="searchInputPlaceholder"
         [selection]="lotsOfItemsSelection"

projects/ngb-filterable-dropdown/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.html

@@ -83,15 +83,16 @@
         </div>
         <cdk-virtual-scroll-viewport 
           #viewport 
-          [itemSize]="ITEM_SIZE" 
+          [itemSize]="itemHeight" 
           class="virtual-scroll-viewport"
           [hidden]="!filteredItems.length || loading"
           [style.height.px]="viewportHeight"
         >
-          <div *cdkVirtualFor="let item of filteredItems">
+          <div *cdkVirtualFor="let item of filteredItems" [style.height.px]="itemHeight">
             <button
               class="dropdown-item filterable-dropdown-item px-2"
               type="button"
+              [style.height.px]="itemHeight"
               [ngbTooltip]="item"
               [disableTooltip]="!tooltips" 
               [openDelay]="tooltipsOpenDelay"

projects/ngb-filterable-dropdown/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.ts

@@ -58,13 +58,13 @@ import { SelectionType } from "../selection-type";
 export class NgbCustomFilterableDropdownComponent implements OnInit, OnDestroy {
   public readonly SELECT = SelectionType.All;
   public readonly DESELECT = SelectionType.None;
-  public readonly ITEM_SIZE = 40;
   public readonly MAX_HEIGHT = 280;
 
   @Input() autoClose: boolean | "outside" | "inside" = "outside";
   @Input() allowCreateItem = false;
   @Input() customClickHandle = false;
   @Input() disabled = false;
+  @Input() itemHeight = 37;
   @Input() searchInputPlaceholder = "Search";
   @Input() tooltips = false;
   @Input() tooltipsOpenDelay = 0;
@@ -201,9 +201,9 @@ export class NgbCustomFilterableDropdownComponent implements OnInit, OnDestroy {
   }
 
   get viewportHeight(): number {
-    return this.filteredItems.length * this.ITEM_SIZE > this.MAX_HEIGHT
+    return this.filteredItems.length * this.itemHeight > this.MAX_HEIGHT
       ? this.MAX_HEIGHT
-      : this.filteredItems.length * this.ITEM_SIZE;
+      : this.filteredItems.length * this.itemHeight;
   }
 
   ngOnInit(): void {

projects/ngb-filterable-dropdown/src/lib/ngb-filterable-dropdown/ngb-filterable-dropdown.component.html

@@ -3,6 +3,7 @@
   [autoClose]="autoClose"
   [disabled]="disabled"
   [items]="items"
+  [itemHeight]="itemHeight"
   [loading]="loading"
   [searchInputPlaceholder]="searchInputPlaceholder"
   [selection]="selection"

projects/ngb-filterable-dropdown/src/lib/ngb-filterable-dropdown/ngb-filterable-dropdown.component.ts

@@ -24,6 +24,7 @@ export class NgbFilterableDropdownComponent {
   @Input() autoClose: boolean | "outside" | "inside" = false;
   @Input() disabled = false;
   @Input() items: string | Array<string> = [];
+  @Input() itemHeight = 37;
   @Input() loading = false;
   @Input() placeholder = "No Items Selected";
   @Input() searchInputPlaceholder = "Search";