fix(kselect): intialize element width to 100% [KHCP-12370]

Kong · Jun 26, 2024 · 274b3d8 · 274b3d8
1 parent 22f855d
commit 274b3d8
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/sandbox/pages/SandboxSelect.vue b/sandbox/pages/SandboxSelect.vue
@@ -3,7 +3,28 @@
     :links="inject('app-links', [])"
     title="KSelect"
   >
-    <div class="kselect-sandbox">
+    <KSelect
+      clearable
+      enable-filtering
+      :items="selectItems"
+    >
+      <template #selected-item-template="{ item }">
+        <div class="custom-selected-item-container">
+          <div class="title">
+            <KongIcon />
+            {{ item?.label }}
+          </div>
+          <KBadge v-if="item?.label.toLocaleLowerCase() === 'cats' || item?.label.toLocaleLowerCase() === 'dogs'">
+            {{ item?.label.toLocaleLowerCase() === 'cats' ? 'Feline' : 'Canine' }}
+          </KBadge>
+        </div>
+      </template>
+    </KSelect>
+
+    <div
+      v-if="false"
+      class="kselect-sandbox"
+    >
       <!-- Examples -->
       <SandboxTitleComponent
         is-subtitle
@@ -442,16 +463,16 @@ onMounted(() => {
       font-size: $kui-font-size-20;
     }
   }
+}
 
-  .custom-selected-item-container {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
+.custom-selected-item-container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 
-    .title {
-      display: flex;
-      gap: $kui-space-30;
-    }
+  .title {
+    display: flex;
+    gap: $kui-space-30;
   }
 }
 </style>
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
@@ -408,7 +408,9 @@ const value = computed({
 })
 
 const elementWidth = computed((): string => getSizeFromString(props.width || '100%'))
-const actualElementWidth = ref<string>('') // the pixel value of the element width for KPop container
+// the pixel value of the element width for KPop container
+// initialize to 100% to prevent jumping when the element width is calculated
+const actualElementWidth = ref<string>('100%')
 
 const modifiedAttrs = computed(() => {
   const $attrs = { ...attrs }