fix(Combobox): stop event propagation on enter (#1279)

* fix(Combobox): stop propagation of enter when user makes a selection via keyboard in combobox

* fix: test for event bubbling instead of form submit

packages/radix-vue/src/Combobox/Combobox.test.ts

@@ -294,6 +294,19 @@ describe('given combobox in a form', async () => {
     props: { handleSubmit },
   })
 
+  const valueBox = wrapper.find('input')
+
+  let enterEventBubbledToForm = false
+
+  beforeEach(() => {
+    enterEventBubbledToForm = false
+    wrapper.find('form').element.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        enterEventBubbledToForm = true
+      }
+    })
+  })
+
   it('should have hidden input field', async () => {
     expect(wrapper.find('[type="hidden"]').exists()).toBe(true)
   })
@@ -327,6 +340,21 @@ describe('given combobox in a form', async () => {
       expect(handleSubmit.mock.results[1].value).toStrictEqual({ test: 'Pineapple' })
     })
   })
+
+  describe('after selecting an option via keyboard', () => {
+    beforeEach(async () => {
+      await valueBox.setValue('B')
+      await valueBox.trigger('keydown', { key: 'Enter' })
+    })
+
+    it('should show value correctly', () => {
+      expect((valueBox.element).value).toBe('Banana')
+    })
+
+    it('should bubble up the Enter keydown event to the form', () => {
+      expect(enterEventBubbledToForm).toBe(false)
+    })
+  })
 })
 
 describe('given a Combobox with 1,000 options', async () => {

packages/radix-vue/src/Combobox/ComboboxRoot.vue

@@ -24,7 +24,7 @@ type ComboboxRootContext<T> = {
   inputElement: Ref<HTMLInputElement | undefined>
   onInputElementChange: (el: HTMLInputElement) => void
   onInputNavigation: (dir: 'up' | 'down' | 'home' | 'end') => void
-  onInputEnter: () => void
+  onInputEnter: (event: InputEvent) => void
   selectedValue: Ref<T | undefined>
   selectedElement: ComputedRef<HTMLElement | undefined>
   onSelectedValueChange: (val: T) => void
@@ -278,9 +278,13 @@ provideComboboxRootContext({
 
     nextTick(() => inputElement.value?.focus({ preventScroll: true }))
   },
-  onInputEnter: async () => {
-    if (filteredOptions.value.length && selectedValue.value && selectedElement.value instanceof Element)
+  onInputEnter: async (event) => {
+    if (filteredOptions.value.length && selectedValue.value && selectedElement.value instanceof Element) {
+      event.preventDefault()
+      event.stopPropagation()
+
       selectedElement.value?.click()
+    }
   },
   selectedValue,
   onSelectedValueChange: val => selectedValue.value = val as T,