feat(combobox): add resetSearchTermOnSelect param to ComboboxRoot

docs/content/meta/ComboboxRoot.md

@@ -81,6 +81,13 @@
     'required': false,
     'default': 'true'
   },
+  {
+    'name': 'resetSearchTermOnSelect',
+    'description': '<p>Whether to reset the searchTerm when the Combobox value is selected</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
   {
     'name': 'searchTerm',
     'description': '<p>The controlled search term of the Combobox. Can be binded-with with v-model:searchTerm.</p>\n',

packages/plugins/src/namespaced/generate.ts

@@ -21,10 +21,10 @@ const namespaced = filteredComponent.map((curr: keyof typeof components) => {
   }
   else {
     return `export const ${key} = {\n${
-        Object.keys(tmp).map((k) => { return `  ${k}: ${tmp[k]},\n` }).join('')
+      Object.keys(tmp).map((k) => { return `  ${k}: ${tmp[k]},\n` }).join('')
     }}  as {\n${Object.keys(tmp).map((k) => {
-        return `  ${k}: typeof ${tmp[k]}\n`
-     }).join('')}}`
+      return `  ${k}: typeof ${tmp[k]}\n`
+    }).join('')}}`
   }
 })
 

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

@@ -75,6 +75,11 @@ export interface ComboboxRootProps<T = AcceptableValue> extends PrimitiveProps {
    * @defaultValue `true`
    */
   resetSearchTermOnBlur?: boolean
+  /**
+   * Whether to reset the searchTerm when the Combobox value is selected
+   * @defaultValue `true`
+   */
+  resetSearchTermOnSelect?: boolean
 }
 </script>
 
@@ -89,6 +94,7 @@ import isEqual from 'fast-deep-equal'
 const props = withDefaults(defineProps<ComboboxRootProps<T>>(), {
   open: undefined,
   resetSearchTermOnBlur: true,
+  resetSearchTermOnSelect: true,
 })
 const emit = defineEmits<ComboboxRootEmits<T>>()
 
@@ -143,7 +149,7 @@ async function onOpenChange(val: boolean) {
   else {
     isUserInputted.value = false
     if (props.resetSearchTermOnBlur)
-      resetSearchTerm()
+      resetSearchTerm('blur')
   }
 }
 
@@ -189,16 +195,19 @@ const filteredOptions = computed(() => {
   return options.value
 })
 
-function resetSearchTerm() {
+function resetSearchTerm(mode?: 'blur' | 'select') {
+  // clear when blur or when select and resetSearchTermOnSelect is true
+  const condition = mode === 'blur' || (mode === 'select' && props.resetSearchTermOnSelect)
+
   if (!multiple.value && modelValue.value && !Array.isArray(modelValue.value)) {
     if (props.displayValue)
       searchTerm.value = props.displayValue(modelValue.value)
     else if (typeof modelValue.value !== 'object')
       searchTerm.value = modelValue.value.toString()
-    else
+    else if (condition)
       searchTerm.value = ''
   }
-  else {
+  else if (condition) {
     searchTerm.value = ''
   }
 }
@@ -214,7 +223,7 @@ const stringifiedModelValue = computed(() => JSON.stringify(modelValue.value))
 watch(stringifiedModelValue, async () => {
   await nextTick()
   await nextTick()
-  resetSearchTerm()
+  resetSearchTerm('select')
 }, {
   // If searchTerm is provided with value during initialization, we don't reset it immediately
   immediate: !props.searchTerm,

packages/radix-vue/src/Menu/MenuRoot.vue

@@ -50,9 +50,7 @@ export const [injectMenuRootContext, provideMenuRootContext]
 import {
   ref,
   toRefs,
-  watchEffect,
 } from 'vue'
-import { isClient } from '@vueuse/shared'
 import { useVModel } from '@vueuse/core'
 import { PopperRoot } from '@/Popper'
 

packages/radix-vue/src/Splitter/SplitterGroup.vue

@@ -522,7 +522,7 @@ function collapsePanel(panelData: PanelData) {
 
     assert(
       panelSize != null,
-        `Panel size not found for panel "${panelData.id}"`,
+      `Panel size not found for panel "${panelData.id}"`,
     )
 
     if (panelSize !== collapsedSize) {
@@ -625,7 +625,7 @@ function getPanelSize(panelData: PanelData) {
 
   assert(
     panelSize != null,
-      `Panel size not found for panel "${panelData.id}"`,
+    `Panel size not found for panel "${panelData.id}"`,
   )
 
   return panelSize
@@ -654,7 +654,7 @@ function isPanelExpanded(panelData: PanelData) {
 
   assert(
     panelSize != null,
-      `Panel size not found for panel "${panelData.id}"`,
+    `Panel size not found for panel "${panelData.id}"`,
   )
 
   return !collapsible || panelSize > collapsedSize

packages/radix-vue/src/shared/createContext.ts

@@ -40,8 +40,8 @@ export function createContext<ContextValue>(
       `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${
         Array.isArray(providerComponentName)
           ? `one of the following components: ${providerComponentName.join(
-              ', ',
-            )}`
+            ', ',
+          )}`
           : `\`${providerComponentName}\``
       }`,
     )

packages/radix-vue/src/shared/useSingleOrMultipleValue.ts

@@ -21,7 +21,7 @@ function validateProps({ type, defaultValue, modelValue }: SingleOrMultipleProps
 
   if (modelValue !== undefined && defaultValue !== undefined && typeof modelValue !== typeof defaultValue) {
     throw new Error(
-        `Invalid prop \`value\` of value \`${modelValue}\` supplied, should be the same type as the \`defaultValue\` prop, which is \`${defaultValue}\`. The \`value\` prop must be:
+      `Invalid prop \`value\` of value \`${modelValue}\` supplied, should be the same type as the \`defaultValue\` prop, which is \`${defaultValue}\`. The \`value\` prop must be:
   ${type === 'single' ? '- a string' : type === 'multiple' ? '- an array of strings' : '- a string\n- an array of strings'}
   - \`undefined\``,
     )