fix(kselect,kmultiselect): enter should not submit form while filteri…

…ng (#2497)
Kong · Nov 1, 2024 · adbf36b · adbf36b
1 parent fe51adb
commit adbf36b
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 2 deletions.
diff --git a/src/components/KMultiselect/KMultiselect.cy.ts b/src/components/KMultiselect/KMultiselect.cy.ts
@@ -643,4 +643,34 @@ describe('KMultiselect', () => {
       })
     })
   })
+
+  it('should not cause form submission when enter key is pressed while filtering', () => {
+    const onSubmit = cy.spy().as('onSubmit')
+
+    ;[false, true].forEach(collapsedContext => {
+      cy.mount(() => h('form', {
+        onSubmit: (e: Event) => {
+          e.preventDefault()
+          onSubmit()
+        },
+      }, [
+        h(KMultiselect, {
+          items: [
+            { label: 'Label 1', value: 'val1' },
+            { label: 'Label 2', value: 'val2' },
+          ],
+          enableFiltering: true,
+          collapsedContext,
+        }),
+        h('button', { type: 'submit' }, 'Submit'),
+      ]))
+
+      cy.get('.multiselect-trigger').trigger('click')
+      cy.get('input')
+        .type('Label{enter}')
+        .then(() => {
+          cy.get('@onSubmit').should('not.have.been.called')
+        })
+    })
+  })
 })
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
@@ -817,10 +817,12 @@ const handleItemSelect = (item: MultiselectItem, isNew?: boolean) => {
   emit('update:modelValue', selectedVals)
 }
 
-const onInputEnter = (): void => {
+const onInputEnter = (e: KeyboardEvent): void => {
   if (!filteredItems.value.length && props.enableItemCreation) {
     handleAddItem()
   }
+
+  e.preventDefault()
 }
 
 // add an item with `enter`

diff --git a/src/components/KSelect/KSelect.cy.ts b/src/components/KSelect/KSelect.cy.ts
@@ -603,4 +603,31 @@ describe('KSelect', () => {
       cy.wrap(Cypress.vueWrapper.emitted().change[0][0]).should('be.equal', null)
     })
   })
+
+  it('should not cause form submission when enter key is pressed while filtering', () => {
+    const onSubmit = cy.spy().as('onSubmit')
+
+    cy.mount(() => h('form', {
+      onSubmit: (e: Event) => {
+        e.preventDefault()
+        onSubmit()
+      },
+    }, [
+      h(KSelect, {
+        items: [
+          { label: 'Label 1', value: 'val1' },
+          { label: 'Label 2', value: 'val2' },
+        ],
+        enableFiltering: true,
+      }),
+      h('button', { type: 'submit' }, 'Submit'),
+    ]))
+
+    cy.getTestId('select-input').trigger('click')
+    cy.get('input')
+      .type('Label{enter}')
+      .then(() => {
+        cy.get('@onSubmit').should('not.have.been.called')
+      })
+  })
 })
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
@@ -486,10 +486,12 @@ const onInputKeypress = (event: Event) => {
   }
 }
 
-const onInputEnter = (): void => {
+const onInputEnter = (e: KeyboardEvent): void => {
   if (!filteredItems.value.length && props.enableItemCreation) {
     handleAddItem()
   }
+
+  e.preventDefault()
 }
 
 const handleAddItem = (): void => {