fix(kselect): don't emit query-change on select [KHCP-13895] (#2493)

* fix(kselect): dont emit query-change on select [KHCP-13895]

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

* fix: address pr feedback

src/components/KSelect/KSelect.cy.ts

@@ -212,8 +212,10 @@ describe('KSelect', () => {
     cy.getTestId('item-slot-content').should('be.visible').should('contain.text', itemSlotContent)
   })
 
-  it('handles all states correctly when `enableFiltering` is `true`', () => {
+  it('handles all states correctly when enableFiltering is true', () => {
     const onQueryChange = cy.spy().as('onQueryChange')
+    const itemLabel = 'Label 1'
+
     mount(KSelect, {
       props: {
         enableFiltering: true,
@@ -224,23 +226,52 @@ describe('KSelect', () => {
     })
 
     cy.get('input').type('a').then(() => {
-      cy.get('@onQueryChange').should('have.been.calledWith', '')
       cy.get('@onQueryChange').should('have.been.calledWith', 'a')
     }).then(() => {
       cy.wrap(Cypress.vueWrapper.setProps({ loading: true })).getTestId('select-loading').should('exist')
     }).then(() => {
       cy.wrap(Cypress.vueWrapper.setProps({ loading: false })).getTestId('select-loading').should('not.exist')
     }).then(() => {
-      cy.wrap(Cypress.vueWrapper.setProps({ items: [{ label: 'Label 1', value: 'label1' }] })).getTestId('select-item-label1').should('contain.text', 'Label 1')
+      cy.wrap(Cypress.vueWrapper.setProps({ items: [{ label: itemLabel, value: 'label1' }] })).getTestId('select-item-label1').should('contain.text', itemLabel)
     }).then(() => {
       cy.getTestId('select-item-label1').trigger('click')
-      cy.get('input').should('have.value', 'Label 1')
+      cy.get('input').should('have.value', itemLabel)
       cy.getTestId('select-input').trigger('click')
       cy.get('[data-testid="select-item-label1"] button').should('have.class', 'selected')
       cy.get('@onQueryChange').should('have.been.calledWith', '')
     })
   })
 
+  it('handles query change correctly', () => {
+    const itemLabel = 'Label 1'
+    let emitCount = 0
+
+    mount(KSelect, {
+      props: {
+        enableFiltering: true,
+        loading: false,
+        items: [{ label: itemLabel, value: 'label1' }],
+      },
+    })
+
+    cy.get('input').type(itemLabel).then(() => {
+      emitCount += itemLabel.length // 1 emit for each character typed
+      cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'query-change')
+      cy.wrap(Cypress.vueWrapper.emitted()['query-change']).should('have.length', emitCount)
+      cy.getTestId('select-item-label1').trigger('click')
+      // selecting an item should not emit query change
+      cy.wrap(Cypress.vueWrapper.emitted()['query-change']).should('have.length', emitCount)
+      cy.getTestId('select-input').trigger('click').then(() => {
+        emitCount += 1 // 1 for resetting query when opening dropdown
+        // simulate pasting a value
+        cy.get('input').invoke('val', itemLabel).trigger('input').then(() => {
+          emitCount += 1 // 1 for pasting the value
+          cy.wrap(Cypress.vueWrapper.emitted()['query-change']).should('have.length', emitCount)
+        })
+      })
+    })
+  })
+
   it('can clear selection when clearable is true', () => {
     const labels = ['Label 1', 'Label 2']
     const vals = ['label1', 'label2']

src/components/KSelect/KSelect.vue

@@ -379,6 +379,8 @@ const labelElement = ref<InstanceType<typeof KLabel> | null>(null)
 
 const strippedLabel = computed((): string => stripRequiredLabel(props.label, isRequired.value))
 
+// sometimes (e.g. when selecting an item) we don't want to emit the query change event
+const skipQueryChangeEmit = ref<boolean>(false)
 const filterQuery = ref<string>('')
 
 // whether or not filter string matches an existing item's label
@@ -529,6 +531,7 @@ const handleItemSelect = (item: SelectItem, isNew?: boolean) => {
     }
   })
 
+  skipQueryChangeEmit.value = true
   filterQuery.value = item.label
 }
 
@@ -576,8 +579,6 @@ const onQueryChange = (query: string) => {
 
 const onInputFocus = (): void => {
   inputFocused.value = true
-
-  emit('query-change', filterQuery.value)
 }
 
 const onInputBlur = (): void => {
@@ -613,6 +614,7 @@ const onClose = (toggle: () => void, isToggled: boolean) => {
   isDropdownOpen.value = false
 
   if (selectedItem.value) {
+    skipQueryChangeEmit.value = true
     filterQuery.value = selectedItem.value.label
   } else {
     filterQuery.value = ''
@@ -691,6 +693,7 @@ watch(() => props.items, (newValue, oldValue) => {
       selectItems.value[i].key += '-selected'
 
       if (!inputFocused.value) {
+        skipQueryChangeEmit.value = true
         filterQuery.value = selectedItem.value.label
       }
     }
@@ -713,8 +716,14 @@ watch(() => props.items, (newValue, oldValue) => {
   }
 }, { deep: true, immediate: true })
 
-watch(filterQuery, (q: string) => {
-  emit('query-change', q)
+watch(filterQuery, (query: string) => {
+  // skip emitting query change when the query is the selected item's label
+  if (skipQueryChangeEmit.value && query) {
+    return
+  }
+
+  emit('query-change', query)
+  skipQueryChangeEmit.value = false
 })
 
 watch(selectedItem, (newVal, oldVal) => {