fix: dismiss layer when focus outside combobox (#473)

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

@@ -5,19 +5,7 @@ import {
   useHideOthers,
 } from '@/shared'
 
-export type ComboboxContentImplEmits = {
-  closeAutoFocus: [event: Event]
-  /**
-   * Event handler called when the escape key is down.
-   * Can be prevented.
-   */
-  escapeKeyDown: [event: KeyboardEvent]
-  /**
-   * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
-   * Can be prevented.
-   */
-  pointerDownOutside: [event: PointerDownOutsideEvent]
-}
+export type ComboboxContentImplEmits = DismissableLayerEmits
 
 export interface ComboboxContentImplProps extends PopperContentProps {
   position?: 'inline' | 'popper'
@@ -39,9 +27,9 @@ import {
   toRefs,
 } from 'vue'
 import { injectComboboxRootContext } from './ComboboxRoot.vue'
+import type { DismissableLayerEmits } from '@/DismissableLayer'
 import {
   DismissableLayer,
-  type PointerDownOutsideEvent,
 } from '@/DismissableLayer'
 import { PopperContent, type PopperContentProps } from '@/Popper'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
@@ -93,8 +81,13 @@ provideComboboxContentContext({ position })
   <DismissableLayer
     as-child
     :disable-outside-pointer-events="disableOutsidePointerEvents"
-    @focus-outside.prevent
     @dismiss="rootContext.onOpenChange(false)"
+    @focus-outside="(ev) => {
+      // if clicking inside the combobox, prevent dismiss
+      if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
+      emits('focusOutside', ev)
+    }"
+    @interact-outside="emits('interactOutside', $event)"
     @escape-key-down="emits('escapeKeyDown', $event)"
     @pointer-down-outside="(ev) => {
       // if clicking inside the combobox, prevent dismiss

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

@@ -151,6 +151,16 @@ watch(modelValue, async (val) => {
     searchTerm.value = ''
 }, { immediate: true })
 
+watch(open, (val) => {
+  if (val && modelValue.value) {
+    if (typeof modelValue.value === 'string' && !multiple.value)
+      selectedValue.value = modelValue.value
+
+    else if (Array.isArray(modelValue.value) && multiple.value)
+      selectedValue.value = modelValue.value[0]
+  }
+})
+
 const isFormControl = useFormControl(parentElement)
 
 function scrollSelectedValueIntoView() {