diff --git a/src/components/Select.vue b/src/components/Select.vue
index a0e4ffa..e8710f6 100644
--- a/src/components/Select.vue
+++ b/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,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
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index f67dcc5..e2d152d 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -249,6 +249,36 @@ describe('Select.vue', () => {
expect(vm.$children[0].isOptionSelected('foo')).toEqual(true)
}),
+ it('applies the "empty" class to the search input when no value is selected', () => {
+ const vm = new Vue({
+ template: '
',
+ components: {vSelect},
+ data: {
+ value: null,
+ options: [{label: 'one'}]
+ }
+ }).$mount()
+
+ expect(vm.$children[0].inputClasses.empty).toEqual(true)
+ expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
+ expect(vm.$children[0].inputClasses.hidden).toEqual(false)
+ }),
+
+ it('applies the "shrunk" class to the search input when one or more value is selected', () => {
+ const vm = new Vue({
+ template: '
',
+ components: {vSelect},
+ data: {
+ value: [{label: 'one'}],
+ options: [{label: 'one'}]
+ }
+ }).$mount()
+
+ expect(vm.$children[0].inputClasses.shrunk).toEqual(true)
+ expect(vm.$children[0].inputClasses.empty).toEqual(false)
+ expect(vm.$children[0].inputClasses.hidden).toEqual(false)
+ }),
+
describe('change Event', () => {
it('will trigger the input event when the selection changes', (done) => {
const vm = new Vue({
@@ -1318,7 +1348,34 @@ describe('Select.vue', () => {
expect(vm.$refs.select.search).toEqual('')
done()
})
- })
+ })
+
+ it('should apply the "empty" class to the search input when it does not have a selected value', () => {
+ const vm = new Vue({
+ template: '
',
+ data: {
+ value: '',
+ options: ['one', 'two', 'three']
+ }
+ }).$mount()
+ expect(vm.$children[0].inputClasses.empty).toEqual(true)
+ expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
+ expect(vm.$children[0].inputClasses.hidden).toEqual(false)
+ })
+
+ it('should apply the "hidden" class to the search input when a value is present', () => {
+ const vm = new Vue({
+ template: '
',
+ data: {
+ value: 'one',
+ options: ['one', 'two', 'three']
+ }
+ }).$mount()
+
+ expect(vm.$children[0].inputClasses.hidden).toEqual(true)
+ expect(vm.$children[0].inputClasses.empty).toEqual(false)
+ expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
+ })
it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
const vm = new Vue({