fix(VAutocomplete): show selections slot and the input side-by-side l…

…ike v2 does (#15768) fixes #15756
vuetifyjs · Oct 13, 2022 · 198c009 · 198c009
1 parent 073eca7
commit 198c009
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
@@ -90,5 +90,10 @@
         opacity: 0
 
     .v-field--focused
-      .v-autocomplete__selection
+      .v-autocomplete__selection-text
         opacity: 0
+
+  &--selection-slot
+    &.v-text-field input
+      position: relative
+      padding-inline-start: 0
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -178,7 +178,10 @@ export const VAutocomplete = genericComponent<new <
 
         isSelecting.value = true
 
-        search.value = item.title
+        if (!slots.selection) {
+          search.value = item.title
+        }
+
         menu.value = false
         isPristine.value = true
 
@@ -189,7 +192,7 @@ export const VAutocomplete = genericComponent<new <
     watch(isFocused, val => {
       if (val) {
         isSelecting.value = true
-        search.value = props.multiple ? '' : String(selections.value.at(-1)?.props.title ?? '')
+        search.value = props.multiple || !!slots.selection ? '' : String(selections.value.at(-1)?.props.title ?? '')
         isPristine.value = true
 
         nextTick(() => isSelecting.value = false)
@@ -224,6 +227,7 @@ export const VAutocomplete = genericComponent<new <
               'v-autocomplete--active-menu': menu.value,
               'v-autocomplete--chips': !!props.chips,
               [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,
+              'v-autocomplete--selection-slot': !!slots.selection,
             },
           ]}
           appendInnerIcon={ props.menuIcon }