fix(kselect): address PR feedback [KHCP-8998]

Kong · Jan 4, 2024 · 326576f · 326576f
1 parent 42cd593
commit 326576f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git 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
+}
+```
+
 <ClientOnly>
   <KSelect :items="[{
     label: 'Service A',
@@ -236,7 +247,18 @@ By default, items passed to KSelect are not searchable. When `enableFiltering` p
 
 ### filterFunction
 
-A custom function to perform item filtering.
+A custom function to perform item filtering. Expects an object with query string and items to filter through. To keep track of user input you can listen to [`@query-change` event](#query-change).
+
+```ts
+interface SelectFilterFunctionParams {
+  query: string
+  items: SelectItem[]
+}
+```
+
+:::tip TIP
+When using `filterFunction` prop in conjunction with `enableItemCreation` set to `true` you must keep track of added and removed custom items to be able to provide the most up to date items to `filterFunction`. To achieve that you want to utilize [`@item-added`](#item-added) and [`@item-removed`](#item-added) events.
+:::
 
 <ClientOnly>
   <KSelect enable-filtering :filter-function="tagsFilter" placeholder="Try searching for 'dev' or 'prod'" :items="selectItemsUnselectedTagged" />
@@ -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
@@ -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
@@ -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)
 }
 </script>