feat(Combobox): add clear modelValue on cancel property (#2213)

epr3 · web-flow · commit 525cd9fccc98 · 2025-10-10T13:15:05.000+08:00
* feat(Combobox): add clear model value prop

* docs(Combobox): generate docs
diff --git a/docs/content/meta/ComboboxRoot.md b/docs/content/meta/ComboboxRoot.md
@@ -100,6 +100,13 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'resetModelValueOnClear',
+    'description': '<p>When <code>true</code> the <code>modelValue</code> will be reset to <code>null</code> (or <code>[]</code> if <code>multiple</code>)</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  },
   {
     'name': 'resetSearchTermOnBlur',
     'description': '<p>Whether to reset the searchTerm when the Combobox input blurred</p>\n',
diff --git a/packages/core/src/Combobox/ComboboxCancel.vue b/packages/core/src/Combobox/ComboboxCancel.vue
@@ -23,6 +23,9 @@ function handleClick() {
   if (rootContext.inputElement.value) {
     rootContext.inputElement.value.value = ''
     rootContext.inputElement.value.focus()
+    if (rootContext.resetModelValueOnClear?.value) {
+      rootContext.modelValue.value = rootContext.multiple.value ? [] : null
+    }
   }
 }
 </script>
diff --git a/packages/core/src/Combobox/ComboboxRoot.vue b/packages/core/src/Combobox/ComboboxRoot.vue
@@ -29,6 +29,7 @@ type ComboboxRootContext<T> = {
   ignoreFilter: Ref<boolean>
   openOnFocus: Ref<boolean>
   openOnClick: Ref<boolean>
+  resetModelValueOnClear: Ref<boolean>
 }
 
 export const [injectComboboxRootContext, provideComboboxRootContext]
@@ -72,6 +73,10 @@ export interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRoot
    * When `true`, disable the default filters
    */
   ignoreFilter?: boolean
+  /**
+   * When `true` the `modelValue` will be reset to `null` (or `[]` if `multiple`)
+   */
+  resetModelValueOnClear?: boolean
 }
 </script>
 
@@ -88,6 +93,7 @@ const props = withDefaults(defineProps<ComboboxRootProps<T>>(), {
   resetSearchTermOnSelect: true,
   openOnFocus: false,
   openOnClick: false,
+  resetModelValueOnClear: false,
 })
 const emits = defineEmits<ComboboxRootEmits<T>>()
 
@@ -101,7 +107,7 @@ defineSlots<{
 }>()
 
 const { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()
-const { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, openOnFocus, openOnClick, dir: propDir } = toRefs(props)
+const { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, openOnFocus, openOnClick, dir: propDir, resetModelValueOnClear } = toRefs(props)
 
 const dir = useDirection(propDir)
 
@@ -236,6 +242,7 @@ provideComboboxRootContext({
   ignoreFilter,
   openOnFocus,
   openOnClick,
+  resetModelValueOnClear,
 })
 </script>
 

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,9 @@ function handleClick() {`
`23`	`23`	`if (rootContext.inputElement.value) {`
`24`	`24`	`rootContext.inputElement.value.value = ''`
`25`	`25`	`rootContext.inputElement.value.focus()`
	`26`	`+ if (rootContext.resetModelValueOnClear?.value) {`
	`27`	`+ rootContext.modelValue.value = rootContext.multiple.value ? [] : null`
	`28`	`+ }`
`26`	`29`	`}`
`27`	`30`	`}`
`28`	`31`	`</script>`