fixes #1382

src/components/VSelect/VSelect.spec.js

@@ -231,4 +231,35 @@ test('VSelect.js', ({ mount, shallow }) => {
     expect(wrapper.vm.searchValue).toBe('foo')
     expect('Application is missing <v-app> component.').toHaveBeenTipped()
   })
+
+  it('should render a disabled input with placeholder', () => {
+    const wrapper = mount(VSelect, {
+      propsData: {
+        placeholder: 'Placeholder'
+      }
+    })
+
+    const input = wrapper.find('input')[0]
+
+    expect(input.hasAttribute('disabled', 'disabled')).toBe(true)
+    expect(input.hasAttribute('placeholder', 'Placeholder')).toBe(true)
+    expect(input.html()).toMatchSnapshot()
+    expect('Application is missing <v-app> component.').toHaveBeenTipped()
+  })
+
+  it('should not display when not autocomplete with placeholder and dirty', () => {
+    const wrapper = mount(VSelect, {
+      propsData: {
+        placeholder: 'Placeholder',
+        items: ['foo'],
+        value: 'foo'
+      }
+    })
+
+    const input = wrapper.find('input')[0]
+
+    expect(input.hasAttribute('style', 'display: none;')).toBe(true)
+    expect(input.html()).toMatchSnapshot()
+    expect('Application is missing <v-app> component.').toHaveBeenTipped()
+  })
 })

src/components/VSelect/VSelect.vue

@@ -146,7 +146,8 @@
         return this.autocomplete || this.editable
       },
       isDirty () {
-        return this.selectedItems.length
+        return this.selectedItems.length ||
+          this.placeholder
       },
       isDropdown () {
         return this.segmented || this.overflow || this.editable || this.solo

src/components/VSelect/__snapshots__/VSelect.spec.js.snap

@@ -52,3 +52,24 @@ exports[`VSelect.js should have -1 tabindex when disabled 1`] = `
 </div>
 
 `;
+
+exports[`VSelect.js should not display when not autocomplete with placeholder and dirty 1`] = `
+
+<input disabled="disabled"
+       tabindex="0"
+       class="input-group--select__autocomplete"
+       placeholder="Placeholder"
+       style="display: none;"
+>
+
+`;
+
+exports[`VSelect.js should render a disabled input with placeholder 1`] = `
+
+<input disabled="disabled"
+       tabindex="0"
+       class="input-group--select__autocomplete"
+       placeholder="Placeholder"
+>
+
+`;

src/components/VSelect/mixins/generators.js

@@ -31,42 +31,46 @@ export default {
       return this.$createElement('v-menu', data, [this.genList()])
     },
     genSelectionsAndSearch () {
-      let input
+      const data = {
+        'class': 'input-group--select__autocomplete',
+        style: {
+          flex: this.shouldBreak ? '1 0 100%' : null
+        },
+        attrs: {
+          ...this.$attrs,
+          disabled: !this.isAutocomplete,
+          tabindex: this.disabled ? -1 : 0
+        },
+        domProps: {
+          value: this.lazySearch
+        },
+        on: {
+          focus: this.focus,
+          blur: () => {
+            if (this.isActive) return
 
-      if (this.isAutocomplete) {
-        input = this.$createElement('input', {
-          'class': 'input-group--select__autocomplete',
-          style: {
-            flex: this.shouldBreak ? '1 0 100%' : null
+            this.blur()
           },
-          attrs: {
-            ...this.$attrs,
-            tabindex: this.disabled ? -1 : 0
-          },
-          domProps: { value: this.lazySearch },
-          on: {
-            focus: this.focus,
-            blur: () => {
-              if (this.isActive) return
-
-              this.blur()
-            },
-            input: e => (this.searchValue = e.target.value)
-          },
-          ref: 'input',
-          key: 'input'
-        })
+          input: e => (this.searchValue = e.target.value)
+        },
+        directives: [{
+          name: 'show',
+          value: this.isAutocomplete || (this.placeholder && !this.selectedItems.length)
+        }],
+        ref: 'input',
+        key: 'input'
       }
 
-      const selections = this.genSelections()
-
-      input && selections.push(input)
+      if (this.placeholder) data.domProps.placeholder = this.placeholder
 
       return this.$createElement('div', {
         'class': 'input-group__selections',
         style: { 'overflow': 'hidden' },
         ref: 'activator'
-      }, [selections])
+      }, [
+        this.genSelections(),
+        this.$createElement('input', data)
+      ])
     },
     genSelections () {
       if (this.isAutocomplete && !this.multiple) return []

src/stylus/components/_text-fields.styl

@@ -128,6 +128,7 @@ theme(textfield, "input-group--text-field")
           transform: translate3d(0, -8px, 0) scale(.75)
 
   &.input-group--dirty
+    &.input-group--select,
     &:not(.input-group--textarea)
       label
         transform: translate3d(0, -18px, 0) scale(.75)