2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-04 06:32:23 +03:00

Fixing unexpected linebreak on single selects

What
---
- Hiding the search input field if the component is in the single value
option.
- Making the search input field full width if no options are selected in
	either single or multi select mode.
- Shrinking it to width auto if there are selected entries in multi
	mode.
Why
---
The component broke into two lines when selecting a a value in single
mode, because an empty, non-interactable input field was pushed down to
the next row if the selected entry had a long label.
This commit is contained in:
Erik Nygren
2018-04-18 13:04:22 +01:00
parent 173f0bfea0
commit 970d1da3c2
2 changed files with 82 additions and 2 deletions
+24 -1
View File
@@ -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,16 @@
.v-select.unsearchable input[type="search"]:hover {
cursor: pointer;
}
.v-select input[type="search"].hidden {
display: none;
}
.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 +347,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 +983,18 @@
}
},
/**
* Classes to be output on input.form-control
* @return {Object}
*/
inputClasses() {
return {
hidden: !this.multiple && !this.isValueEmpty,
shrunk: this.multiple && !this.isValueEmpty,
empty: this.isValueEmpty,
}
},
/**
* If search text should clear on blur
* @return {Boolean} True when single and clearSearchOnSelect