diff --git a/docs/content/meta/ComboboxRoot.md b/docs/content/meta/ComboboxRoot.md
index 1f0f0ed26..49a09eb0b 100644
--- a/docs/content/meta/ComboboxRoot.md
+++ b/docs/content/meta/ComboboxRoot.md
@@ -81,6 +81,13 @@
'required': false,
'default': 'true'
},
+ {
+ 'name': 'resetSearchTermOnSelect',
+ 'description': '
Whether to reset the searchTerm when the Combobox value is selected
\n',
+ 'type': 'boolean',
+ 'required': false,
+ 'default': 'true'
+ },
{
'name': 'searchTerm',
'description': 'The controlled search term of the Combobox. Can be binded with with v-model:searchTerm.
\n',
diff --git a/packages/plugins/src/namespaced/generate.ts b/packages/plugins/src/namespaced/generate.ts
index b5467f09a..4599682df 100644
--- a/packages/plugins/src/namespaced/generate.ts
+++ b/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('')}}`
}
})
diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
index 3113a8862..7e8d9d189 100644
--- a/packages/radix-vue/src/Combobox/ComboboxRoot.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
@@ -77,6 +77,11 @@ export interface ComboboxRootProps extends PrimitiveProps {
* @defaultValue `true`
*/
resetSearchTermOnBlur?: boolean
+ /**
+ * Whether to reset the searchTerm when the Combobox value is selected
+ * @defaultValue `true`
+ */
+ resetSearchTermOnSelect?: boolean
}
@@ -91,6 +96,7 @@ import isEqual from 'fast-deep-equal'
const props = withDefaults(defineProps>(), {
open: undefined,
resetSearchTermOnBlur: true,
+ resetSearchTermOnSelect: true,
})
const emit = defineEmits>()
@@ -148,7 +154,7 @@ async function onOpenChange(val: boolean) {
else {
isUserInputted.value = false
if (props.resetSearchTermOnBlur)
- resetSearchTerm()
+ resetSearchTerm('blur')
}
}
@@ -194,16 +200,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 = ''
}
}
@@ -219,7 +228,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,
diff --git a/packages/radix-vue/src/Menu/MenuRoot.vue b/packages/radix-vue/src/Menu/MenuRoot.vue
index 7feea2aa8..c08427968 100644
--- a/packages/radix-vue/src/Menu/MenuRoot.vue
+++ b/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'
diff --git a/packages/radix-vue/src/Splitter/SplitterGroup.vue b/packages/radix-vue/src/Splitter/SplitterGroup.vue
index 34c46086a..92be7094a 100644
--- a/packages/radix-vue/src/Splitter/SplitterGroup.vue
+++ b/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
diff --git a/packages/radix-vue/src/shared/createContext.ts b/packages/radix-vue/src/shared/createContext.ts
index 18977efe4..cf69d29a5 100644
--- a/packages/radix-vue/src/shared/createContext.ts
+++ b/packages/radix-vue/src/shared/createContext.ts
@@ -40,8 +40,8 @@ export function createContext(
`Injection \`${injectionKey.toString()}\` not found. Component must be used within ${
Array.isArray(providerComponentName)
? `one of the following components: ${providerComponentName.join(
- ', ',
- )}`
+ ', ',
+ )}`
: `\`${providerComponentName}\``
}`,
)
diff --git a/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts b/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts
index 9283d3252..b77e1fcba 100644
--- a/packages/radix-vue/src/shared/useSingleOrMultipleValue.ts
+++ b/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\``,
)