fix(VAutocomplete): add minimum input width when focused

also remove height and padding when using chips. more information is commented on the code
vuetifyjs · May 27, 2020 · 254bb29 · 254bb29
1 parent f225c5b
commit 254bb29
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
@@ -7,6 +7,19 @@
   input
     align-self: center
 
+  // Overwrite v-text-fields
+  // minimum-width default
+  &.v-select.v-input--is-focused
+    input
+      min-width: $autocomplete-focused-input
+
+  // Chips force input to wrap
+  // so we remove height and
+  // padding until focused
+  &:not(.v-input--is-focused).v-select--chips input
+    max-height: 0
+    padding: 0
+
   &--is-selecting-index
     input
       opacity: 0

diff --git a/packages/vuetify/src/components/VAutocomplete/_variables.scss b/packages/vuetify/src/components/VAutocomplete/_variables.scss
@@ -2,3 +2,4 @@
 
 $autocomplete-enclosed-input-margin-top: 24px;
 $autocomplete-dense-enclosed-input-margin-top: 20px;
+$autocomplete-focused-input: 64px;