fix(kselect): item creation logic [KHCP-13908] (#2512)

* fix(kselect): item creation logic [KHCP-13908]

* test(kselect): update component tests [KHCP-13908]

* docs(select): update enable-item-creation prop docs [KHCP-13908]

docs/components/select.md

@@ -362,7 +362,15 @@ Reuse the same display format provided via the [`item-template` slot](#itemtempl
 
 ### enableItemCreation
 
-When used in conjunction with `enableFiltering` set to `true`, KSelect will suggest adding a new value when filtering produces no results.
+KSelect can offer users the ability to add custom items to the list by typing the item they want to and then **clicking the** `... (Add new value)` **item at the bottom of the list**, which will also automatically select it.
+
+Newly created items will have a `label` consisting of the user input and a randomly generated id for the `value` to ensure uniqueness. The item will also have an attribute `custom` set to `true`. This action triggers an `item-added` event containing the added item data.
+
+Deselecting the item will completely remove it from the list and underlying data, and trigger a `item-removed` event containing the removed item's data.
+
+:::tip NOTE
+You cannot add an item if the `label` matches the `label` of a pre-existing item. In that scenario the `... (Add new value)` item will not be displayed.
+:::
 
 <ClientOnly>
   <KSelect enable-item-creation enable-filtering placeholder="Try searching for 'service d'" :items="selectItemsUnselected" />

src/components/KSelect/KSelect.cy.ts

@@ -451,6 +451,10 @@ describe('KSelect', () => {
     cy.get('input').type(labels[0])
     cy.getTestId('select-add-item').should('not.exist')
     cy.get('input').clear()
+    // allows adding item substring of existing label
+    cy.get('input').type(labels[0].substring(0, labels[0].length - 1))
+    cy.getTestId('select-add-item').should('be.visible').should('contain.text', labels[0].substring(0, labels[0].length - 1))
+    cy.get('input').clear()
     // add new item
     cy.get('input').type(newItem)
     cy.getTestId('select-add-item').should('contain.text', newItem)

src/components/KSelect/KSelect.vue

@@ -148,7 +148,7 @@
                 :item="{ label: 'No results', value: 'no_results', disabled: true }"
               />
               <KSelectItem
-                v-if="!filteredItems.length && uniqueFilterQuery && !$slots.empty && enableItemCreation"
+                v-if="uniqueFilterQuery && !$slots.empty && enableItemCreation"
                 key="select-add-item"
                 class="select-add-item"
                 data-testid="select-add-item"