feat(VAutocomplete/VCombobox): add new clearOnSelect prop

closes #6842
vuetifyjs · Jan 13, 2024 · 657d929 · 657d929
1 parent 1f7b403
commit 657d929
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/packages/api-generator/src/locale/en/VAutocomplete.json b/packages/api-generator/src/locale/en/VAutocomplete.json
@@ -1,6 +1,7 @@
 {
   "props": {
     "autoSelectFirst": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches.",
+    "clearOnSelect": "Reset the search text when a selection is made while using the **multiple** prop.",
     "filter": "The filtering algorithm used when searching. [example](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts#L40).",
     "items": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props.",
     "noFilter": "Do not apply filtering when searching. Useful when data is being filtered server side."

diff --git a/packages/api-generator/src/locale/en/VCombobox.json b/packages/api-generator/src/locale/en/VCombobox.json
@@ -1,6 +1,7 @@
 {
   "props": {
     "autoSelectFirst": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches.",
+    "clearOnSelect": "Reset the search text when a selection is made while using the **multiple** prop.",
     "delimiters": "Accepts an array of strings that will trigger a new tag when typing. Does not replace the normal Tab and Enter keys.",
     "items": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props."
   },

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -77,6 +77,7 @@ export const makeVAutocompleteProps = propsFactory({
   autoSelectFirst: {
     type: [Boolean, String] as PropType<boolean | 'exact'>,
   },
+  clearOnSelect: Boolean,
   search: String,
 
   ...makeFilterProps({ filterKeys: ['title'] }),
@@ -334,6 +335,10 @@ export const VAutocomplete = genericComponent<new <
           value.splice(index, 1)
           model.value = value
         }
+
+        if (props.clearOnSelect) {
+          search.value = ''
+        }
       } else {
         model.value = add ? [item] : []
 

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -78,6 +78,10 @@ export const makeVComboboxProps = propsFactory({
   autoSelectFirst: {
     type: [Boolean, String] as PropType<boolean | 'exact'>,
   },
+  clearOnSelect: {
+    type: Boolean,
+    default: true,
+  },
   delimiters: Array as PropType<readonly string[]>,
 
   ...makeFilterProps({ filterKeys: ['title'] }),
@@ -362,7 +366,9 @@ export const VCombobox = genericComponent<new <
           model.value = [...model.value, item]
         }
 
-        search.value = ''
+        if (props.clearOnSelect) {
+          search.value = ''
+        }
       } else {
         const add = set !== false
         model.value = add ? [item] : []