From eb98289b84b8a1b164c0ce1ddd3f584e66dc0163 Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Tue, 8 Sep 2020 12:57:27 +0200
Subject: [PATCH] Add virtual scrolling for search value selector

Adds virtual scrolling for the search value selector.
---
 .../search-value-selector.component.html                  | 8 +++++---
 .../search-value-selector.component.scss                  | 5 +++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/app/shared/components/search-value-selector/search-value-selector.component.html b/client/src/app/shared/components/search-value-selector/search-value-selector.component.html
index 6808f8282..af6d82e91 100644
--- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.html
+++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.html
@@ -34,7 +34,9 @@
         </mat-option>
         <mat-divider></mat-divider>
     </ng-container>
-    <mat-option *ngFor="let selectedItem of getFilteredItems()" [value]="selectedItem.id">
-        {{ selectedItem.getTitle() | translate }}
-    </mat-option>
+    <cdk-virtual-scroll-viewport class="vscroll-viewport" minBufferPx="200" maxBufferPx="300" [itemSize]="50">
+        <mat-option *cdkVirtualFor="let selectedItem of getFilteredItems()" [value]="selectedItem.id">
+            {{ selectedItem.getTitle() | translate }}
+        </mat-option>
+    </cdk-virtual-scroll-viewport>
 </mat-select>
diff --git a/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss b/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
index d5e6a30bd..63db9e233 100644
--- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
+++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
@@ -28,3 +28,8 @@
     display: block;
     text-align: left;
 }
+
+.vscroll-viewport {
+    height: 200px;
+    display: block;
+}