From 326576f45627402d7b28979e02aa515c9133191c Mon Sep 17 00:00:00 2001 From: portikM Date: Thu, 4 Jan 2024 17:03:38 -0500 Subject: [PATCH] fix(kselect): address PR feedback [KHCP-8998] --- docs/components/select.md | 31 ++++++++++++++++++++++---- src/components/KSelect/KSelect.vue | 5 ++++- src/components/KSelect/KSelectItem.vue | 5 +++-- 3 files changed, 34 insertions(+), 7 deletions(-) diff --git a/docs/components/select.md b/docs/components/select.md index 57fc52ed6f..9206a5c9b1 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -40,6 +40,17 @@ Selected service: {{ selectValue || 'none' }} Prop for providing select item options. Supports grouping items under one group name through providing optional `group` property. +```ts +interface SelectItem { + label: string + value: string | number + key?: string + selected?: boolean + disabled?: boolean + group?: string +} +``` + @@ -256,7 +278,7 @@ const selectItems: SelectItem[] = [{ }, { label: 'Service B', value: 'b', - tags: ['dev'] + tags: ['dev'], }, { label: 'Service F', value: 'f', @@ -273,11 +295,12 @@ const selectItems: SelectItem[] = [{ label: 'Service A2', value: 'a2', group: 'Series 2', - tags: ['prod'] + tags: ['prod'], }, { label: 'Service B2', value: 'b2', group: 'Series 2', + tags: ['dev', 'prod'], }] const tagsFilter = (params: SelectFilterFunctionParams) => @@ -682,7 +705,7 @@ const selectItems: SelectItem[] = [{ }] const selectItemsUnselected: SelectItem[] = JSON.parse(JSON.stringify(selectItems)).map((item: SelectItem) => ({ ...item, selected: false })) -const selectItemsUnselectedTagged: SelectItem[] = JSON.parse(JSON.stringify(selectItemsUnselected)).map((item: SelectItem) => ({ ...item, selected: false, ...(item.value === 'b' && { tags: ['dev'] }), ...(item.value === 'a2' && { tags: ['prod'] }) })) +const selectItemsUnselectedTagged: SelectItem[] = JSON.parse(JSON.stringify(selectItemsUnselected)).map((item: SelectItem) => ({ ...item, selected: false, ...(item.value === 'b' && { tags: ['dev'] }), ...(item.value === 'a2' && { tags: ['prod'] }), ...(item.value === 'b2' && { tags: ['dev', 'prod'] }) })) const tagsFilter = (params: SelectFilterFunctionParams) => params?.items?.filter((item: SelectItem) => item.label?.toLowerCase().includes(params.query?.toLowerCase()) || item.tags?.includes(params.query?.toLowerCase())) diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue index efb636f6d5..108da494b1 100644 --- a/src/components/KSelect/KSelect.vue +++ b/src/components/KSelect/KSelect.vue @@ -457,10 +457,12 @@ const handleItemSelect = (item: SelectItem, isNew?: boolean) => { selectItems.value?.forEach((anItem, i) => { 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) { @@ -527,6 +529,7 @@ const onInputBlur = (): void => { } const onSelectWrapperClick = (event: Event): void => { + console.log('here') /** * The component is designed so that most of the time it propagates click events * so that popover component handles them properly (for example closing the dropdown when clicking outside of it or selecting an item). @@ -662,7 +665,7 @@ $kSelectInputHelpTextHeight: calc(var(--kui-line-height-20, $kui-line-height-20) .select-input { &.filtering-disabled { - :deep(input) { + :deep(input:not([disabled])) { caret-color: transparent; cursor: pointer; } diff --git a/src/components/KSelect/KSelectItem.vue b/src/components/KSelect/KSelectItem.vue index 57a2d9ddb4..15d97c8454 100644 --- a/src/components/KSelect/KSelectItem.vue +++ b/src/components/KSelect/KSelectItem.vue @@ -41,11 +41,12 @@ const emit = defineEmits<{ }>() const handleClick = (e: MouseEvent): void => { - if (props.item.disabled) { - // Clicking on a disabled item should not close the dropdown + if (props.item.disabled || props.item.selected) { + // Clicking on a disabled or selected item should not close the dropdown e.stopPropagation() return } + emit('selected', props.item) }