fix(kselect): clear filter on blur [KHCP-13444] (#2486)

* fix(kselect): clear filter on blur [KHCP-13444] * fix(kselect, kmultiselect): create item on enter key press [KHCP-13444]
Kong · Oct 29, 2024 · 83da311 · 83da311
1 parent e53e4f0
commit 83da311
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
@@ -62,6 +62,7 @@
                   }
                 }"
                 @focus="onInputFocus"
+                @keydown.enter="onInputEnter"
                 @keyup="(evt: any) => triggerFocus(evt, isToggled)"
                 @mouseenter="() => isHovered = true"
                 @mouseleave="() => isHovered = false"
@@ -170,6 +171,7 @@
                   type="text"
                   @click.stop
                   @focus="triggerInitialFocus"
+                  @keydown.enter="onInputEnter"
                   @keyup="onDropdownInputKeyup"
                   @keyup.enter.stop
                   @update:model-value="onQueryChange"
@@ -815,9 +817,15 @@ const handleItemSelect = (item: MultiselectItem, isNew?: boolean) => {
   emit('update:modelValue', selectedVals)
 }
 
+const onInputEnter = (): void => {
+  if (!filteredItems.value.length && props.enableItemCreation) {
+    handleAddItem()
+  }
+}
+
 // add an item with `enter`
 const handleAddItem = (): void => {
-  if (!props.enableItemCreation || !filterString.value || !uniqueFilterStr.value) {
+  if (!props.enableItemCreation || !filterString.value || !uniqueFilterStr.value || !props.itemCreationValidator(filterString.value)) {
     // do nothing if not enabled or no label or label already exists
     return
   }

diff --git a/src/components/KSelect/KSelect.cy.ts b/src/components/KSelect/KSelect.cy.ts
@@ -143,7 +143,7 @@ describe('KSelect', () => {
     cy.getTestId(`select-item-${vals[0]}`).should('contain.text', labels[0])
     cy.getTestId(`select-item-${vals[1]}`).should('not.exist')
 
-    cy.getTestId(`select-item-${vals[0]}`).eq(0).click({ force: true })
+    cy.getTestId(`select-item-${vals[0]}`).click()
     cy.getTestId('select-input').should('have.value', labels[0])
   })
 

diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
@@ -56,6 +56,7 @@
             @blur="onInputBlur"
             @click="onInputClick"
             @focus="onInputFocus"
+            @keydown.enter="onInputEnter"
             @keypress="onInputKeypress"
             @keyup="(evt: any) => triggerFocus(evt, isToggled)"
             @keyup.enter.stop
@@ -477,6 +478,12 @@ const onInputKeypress = (event: Event) => {
   }
 }
 
+const onInputEnter = (): void => {
+  if (!filteredItems.value.length && props.enableItemCreation) {
+    handleAddItem()
+  }
+}
+
 const handleAddItem = (): void => {
   if (!props.enableItemCreation || !filterQuery.value || !uniqueFilterQuery.value) {
     // do nothing if not enabled or no label or label already exists
@@ -607,6 +614,8 @@ const onClose = (toggle: () => void, isToggled: boolean) => {
 
   if (selectedItem.value) {
     filterQuery.value = selectedItem.value.label
+  } else {
+    filterQuery.value = ''
   }
 
   if (isToggled) {