From 9fa8d5c1fabad02638b443067e8e650e25601abd Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Sun, 8 Aug 2021 21:14:29 +0800
Subject: [PATCH] improve multiselect

---
 src/assets/app.scss       |  4 ++--
 src/pages/EditMonitor.vue | 29 ++++++++++++++++++-----------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 45f09f0bc..6cb8f935c 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -162,8 +162,8 @@
         border-color: $dark-border-color;
     }
 
-    .multiselect__option--selected.multiselect__option--highlight {
-
+    .multiselect--above .multiselect__content-wrapper {
+        border-color: $dark-border-color;
     }
 
     .multiselect__option--selected {
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 576566b04..6e6601a76 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -107,6 +107,7 @@
                             :preserve-search="true"
                             placeholder="Pick Accepted Status Codes..."
                             :preselect-first="false"
+                            :max-height="600"
                             :taggable="true"
                         ></VueMultiselect>
 
@@ -161,25 +162,17 @@ export default {
         NotificationDialog,
         VueMultiselect,
     },
+
     data() {
-        let acceptedStatusCodeOptions = [
-            "100-199",
-            "200-299",
-            "300-399",
-            "400-499",
-            "500-599",
-        ];
-        for (let i = 100; i <= 999; i++) {
-            acceptedStatusCodeOptions.push(i.toString());
-        }
         return {
             processing: false,
             monitor: {
                 notificationIDList: {},
             },
-            acceptedStatusCodeOptions,
+            acceptedStatusCodeOptions: [],
         }
     },
+
     computed: {
         pageName() {
             return (this.isAdd) ? "Add New Monitor" : "Edit"
@@ -198,6 +191,20 @@ export default {
     },
     mounted() {
         this.init();
+
+        let acceptedStatusCodeOptions = [
+            "100-199",
+            "200-299",
+            "300-399",
+            "400-499",
+            "500-599",
+        ];
+
+        for (let i = 100; i <= 999; i++) {
+            acceptedStatusCodeOptions.push(i.toString());
+        }
+
+        this.acceptedStatusCodeOptions = acceptedStatusCodeOptions;
     },
     methods: {
         init() {