Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(kselect): remove altering slected item key [KHCP-13749] #2541

Merged
merged 3 commits into from
Dec 13, 2024
Merged

fix(kselect): remove altering slected item key [KHCP-13749] #2541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
826a243
fix(kselect): remove altering slected item key [KHCP-13749]
portikM Dec 13, 2024
0203544
fix: minor fix
portikM Dec 13, 2024
304a63c
fix: minor fix
portikM Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/components/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 2 additions & 5 deletions src/components/KSelect/KSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -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}`
Expand All @@ -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
Expand Down
Loading