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({