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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user