diff --git a/docs/components/select.md b/docs/components/select.md index 1bfc5f59c9..6ad2279e22 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -44,7 +44,7 @@ Prop for providing select item options. Supports grouping items under one group interface SelectItem { label: string value: string | number - key?: string // optional parameter that will be appended with `-selected` when selected + key?: string selected?: boolean disabled?: boolean group?: string diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue index fa0e1c6eb3..98ce90b6dc 100644 --- a/src/components/KSelect/KSelect.vue +++ b/src/components/KSelect/KSelect.vue @@ -528,12 +528,10 @@ const handleItemSelect = (item: SelectItem, isNew?: boolean) => { if (anItem.key === item.key) { // select the item anItem.selected = true - anItem.key = anItem?.key?.includes('-selected') ? anItem.key : `${anItem.key}-selected` selectedItem.value = anItem } else if (anItem.selected) { // deselect previously selected item anItem.selected = false - anItem.key = anItem?.key?.replace(/-selected/gi, '') if (anItem.custom) { selectItems.value?.splice(i, 1) emit('item-removed', anItem) @@ -550,7 +548,6 @@ const handleItemSelect = (item: SelectItem, isNew?: boolean) => { const clearSelection = (): void => { selectItems.value?.forEach((anItem, i) => { anItem.selected = false - anItem.key = anItem?.key?.replace(/-selected/gi, '') if (anItem.custom) { selectItems.value?.splice(i, 1) emit('item-removed', anItem) @@ -674,11 +671,12 @@ watch(() => props.items, (newValue, oldValue) => { } for (let i = 0; i < selectItems.value?.length; i++) { - // Ensure each item has a `selected` property + // Ensure each item has a selected property if (selectItems.value[i].selected === undefined) { selectItems.value[i].selected = false } + // ensure each item has a unique key property let selectItemKey = `${selectItems.value[i].label?.replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${i}` if (selectItemKey.includes('undefined')) { selectItemKey = `select-item-label-${i}` @@ -688,7 +686,6 @@ watch(() => props.items, (newValue, oldValue) => { if (selectItems.value[i].value === props.modelValue || selectItems.value[i].selected) { selectItems.value[i].selected = true selectedItem.value = selectItems.value[i] - selectItems.value[i].key += '-selected' if (!inputFocused.value) { skipQueryChangeEmit.value = true