diff --git a/src/components/Select.vue b/src/components/Select.vue
index c2523e9..8b98d0d 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -3,6 +3,10 @@
position: relative;
}
+ .v-select .disabled {
+ cursor: not-allowed !important;
+ }
+
.v-select .open-indicator {
position: absolute;
bottom: 6px;
@@ -193,13 +197,13 @@
@blur="open = false"
@focus="open = true"
type="search"
- class="form-control"
+ :class="[{'disabled': disabled}, 'form-control']"
:placeholder="searchPlaceholder"
:readonly="!searchable"
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
>
-
+
Loading...
@@ -284,6 +288,15 @@
default: false
},
+ /**
+ * Disable the entire component.
+ * @type {Boolean}
+ */
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+
/**
* Equivalent to the `placeholder` attribute on an ``.
* @type {Object}
@@ -495,8 +508,10 @@
if (this.open) {
this.$els.search.blur() // dropdown will close on blur
} else {
- this.open = true
- this.$els.search.focus()
+ if (!this.disabled) {
+ this.open = true
+ this.$els.search.focus()
+ }
}
}
},
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index fd51863..7b88915 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -253,6 +253,25 @@ describe('Select.vue', () => {
})
describe('Toggling Dropdown', () => {
+ it('should not open the dropdown when the el is clicked but the component is disabled', (done) => {
+ const vm = new Vue({
+ template: '
',
+ components: {vSelect},
+ data: {
+ value: [{label: 'one'}],
+ options: [{label: 'one'}]
+ }
+ }).$mount()
+
+ vm.$children[0].toggleDropdown({target: vm.$children[0].$els.search})
+ Vue.nextTick(() => {
+ Vue.nextTick(() => {
+ expect(vm.$children[0].open).toEqual(false)
+ done()
+ })
+ })
+ })
+
it('should open the dropdown when the el is clicked', (done) => {
const vm = new Vue({
template: '
',
@@ -896,4 +915,4 @@ describe('Select.vue', () => {
})
})
})
-})
\ No newline at end of file
+})