From 0e7dfa983003647a3bad9cc04c1ca3cc4476e1a5 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Thu, 18 Mar 2021 18:55:44 +0530
Subject: [PATCH] fix: allow multi select options to overflow

---
 .../multi-select/multi-select.component.scss  |  5 ++++
 .../multi-select/multi-select.component.ts    | 30 ++++++++++---------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss
index d576ee82f..9d96f07d0 100644
--- a/projects/components/src/multi-select/multi-select.component.scss
+++ b/projects/components/src/multi-select/multi-select.component.scss
@@ -64,12 +64,17 @@
   @include dropdown(6px);
   min-width: 120px;
   display: flex;
+  height: 100%;
   flex-direction: column;
 
   .divider {
     padding: 0px 16px 4px 16px;
   }
 
+  .multi-select-options {
+    overflow: auto;
+  }
+
   .multi-select-option {
     display: flex;
     height: 34px;
diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
index 4b55900c7..dba4f1ef5 100644
--- a/projects/components/src/multi-select/multi-select.component.ts
+++ b/projects/components/src/multi-select/multi-select.component.ts
@@ -88,20 +88,22 @@ import { MultiSelectJustify } from './multi-select-justify';
               </ng-container>
             </ng-container>
 
-            <div
-              *ngFor="let item of this.filteredOptions$ | async"
-              (click)="this.onSelectionChange(item)"
-              class="multi-select-option"
-            >
-              <input class="checkbox" type="checkbox" [checked]="this.isSelectedItem(item)" />
-              <ht-icon
-                class="icon"
-                *ngIf="item.icon"
-                [icon]="item.icon"
-                size="${IconSize.ExtraSmall}"
-                [color]="item.iconColor"
-              ></ht-icon>
-              <span class="label">{{ item.label }}</span>
+            <div class="multi-select-options">
+              <div
+                *ngFor="let item of this.filteredOptions$ | async"
+                (click)="this.onSelectionChange(item)"
+                class="multi-select-option"
+              >
+                <input class="checkbox" type="checkbox" [checked]="this.isSelectedItem(item)" />
+                <ht-icon
+                  class="icon"
+                  *ngIf="item.icon"
+                  [icon]="item.icon"
+                  size="${IconSize.ExtraSmall}"
+                  [color]="item.iconColor"
+                ></ht-icon>
+                <span class="label">{{ item.label }}</span>
+              </div>
             </div>
           </div>
         </ht-popover-content>