fix(kmultiselect): address PR feedback [KHCP-8992]

Kong · Dec 5, 2023 · d6c14c1 · d6c14c1
1 parent aa83669
commit d6c14c1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git 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
@@ -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);
     }