Merge pull request #512 from eriknygren/fix-unexpected-wrapping-on-single-select

Fixing unexpected linebreak on single selects

src/components/Select.vue

@@ -73,6 +73,7 @@
     padding: 0;
     background: none;
     border: 1px solid rgba(60, 60, 60, .26);
+    min-height: 36px;
     border-radius: 4px;
     white-space: normal;
   }
@@ -213,6 +214,17 @@
   .v-select.unsearchable input[type="search"]:hover {
     cursor: pointer;
   }
+  .v-select input[type="search"].hidden {
+    width: 0px;
+    padding: 0;
+  }
+  .v-select input[type="search"].shrunk {
+    width: auto;
+  }
+  .v-select input[type="search"].empty {
+    width: 100%;
+  }
+
     /* List Items */
   .v-select li {
     line-height: 1.42857143; /* Normalize line height */
@@ -336,12 +348,12 @@
               @focus="onSearchFocus"
               type="search"
               class="form-control"
+              :class="inputClasses"
               autocomplete="off"
               :disabled="disabled"
               :placeholder="searchPlaceholder"
               :tabindex="tabindex"
               :readonly="!searchable"
-              :style="{ width: isValueEmpty ? '100%' : 'auto' }"
               :id="inputId"
               aria-label="Search for option"
       >
@@ -972,6 +984,18 @@
         }
       },
 
+      /**
+       * Classes to be output on input.form-control
+       * @return {Object}
+       */
+      inputClasses() {
+        return {
+          hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen,
+          shrunk: this.multiple && !this.isValueEmpty,
+          empty: this.isValueEmpty,
+        }
+      },
+
       /**
        * If search text should clear on blur
        * @return {Boolean} True when single and clearSearchOnSelect