From d6c14c1dcd0647851fa0876d707f731d9020717a Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 5 Dec 2023 13:23:03 -0500
Subject: [PATCH] fix(kmultiselect): address PR feedback [KHCP-8992]

---
 docs/components/multiselect.md               |  6 ++---
 src/components/KMultiselect/KMultiselect.vue | 26 ++++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/components/multiselect.md b/docs/components/multiselect.md
index 15607e2283..522a9b7f73 100644
--- a/docs/components/multiselect.md
+++ b/docs/components/multiselect.md
@@ -395,7 +395,7 @@ When using `autosuggest`, you **MUST** use `v-model` otherwise the Multiselect c
 import { MultiselectItem } from '@kong/kongponents'
 
 const allItems: MultiselectItems[] = new Array(10).fill().map((_, i) => ({
-  label: `Item ${i}`,
+  label: `${i % 2 === 0 ? 'Even item' : 'Odd item'} ${i}`,
   description: `This is the description for item ${i}.`,
   value: `autosuggest-item-${i}`,
   ...(i > 5 && { group: `${i % 2 === 0 ? 'Even items greater than 5' : 'Odd items greater than 5'}` })
@@ -495,7 +495,7 @@ function debounce(func, timeout) {
 }
 
 const allItems: MultiselectItems[] = new Array(10).fill().map((_, i) => ({
-  label: `Item ${i}`,
+  label: `${i % 2 === 0 ? 'Even item' : 'Odd item'} ${i}`,
   description: `This is the description for item ${i}.`,
   value: `autosuggest-item-${i}`,
   ...(i > 5 && { group: `${i % 2 === 0 ? 'Even items greater than 5' : 'Odd items greater than 5'}` })
@@ -770,7 +770,7 @@ function debounce(func, timeout) {
 }
 
 const allItems = new Array(10).fill().map((_, i) => ({
-  label: `Item ${i}`,
+  label: `${i % 2 === 0 ? 'Even item' : 'Odd item'} ${i}`,
   description: `This is the description for item ${i}.`,
   value: `autosuggest-item-${i}`,
   ...(i > 5 && { group: `${i % 2 === 0 ? 'Even items greater than 5' : 'Odd items greater than 5'}` })
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
index fa8aa48170..b494ff526b 100644
--- a/src/components/KMultiselect/KMultiselect.vue
+++ b/src/components/KMultiselect/KMultiselect.vue
@@ -36,7 +36,7 @@
           <div
             ref="multiselectElement"
             class="multiselect-trigger"
-            :class="{ focused: isFocused, hovered: isHovered, disabled: isDisabled, readonly: isReadonly, 'multiselect-error': error }"
+            :class="{ focused: isFocused, hovered: isHovered, disabled: isDisabled, readonly: isReadonly }"
             data-testid="multiselect-trigger"
             role="listbox"
             @click="handleFilterClick"
@@ -1137,18 +1137,6 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
       @include inputDisabled;
     }
 
-    &.multiselect-error {
-      @include inputError;
-
-      &.hovered {
-        @include inputErrorHover;
-      }
-
-      &.focused {
-        @include inputErrorFocus;
-      }
-    }
-
     .multiselect-input {
       display: inline-block;
       position: relative;
@@ -1231,6 +1219,18 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
   }
 
   &.multiselect-error {
+    .multiselect-trigger {
+      @include inputError;
+
+      &.hovered {
+        @include inputErrorHover;
+      }
+
+      &.focused {
+        @include inputErrorFocus;
+      }
+    }
+
     .help-text {
       color: var(--kui-color-text-danger, $kui-color-text-danger);
     }