Merge pull request #348 from andywarren86/master

Prevent interaction when component is disabled

dev.html

@@ -9,17 +9,15 @@
     <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
     <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> -->
     <style>
-        html,
-        body,
-        #app {
-            height: 100vh;
-        }
-
+        
         #app {
+            height: 95vh;
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: center;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+            align-content: center;
         }
 
         .v-select {
@@ -50,7 +48,8 @@
                 {{option.label}} ({{option.value}})
             </template>
         </v-select>
-        <v-select disabled placeholder="disabled" value="Some Selected Value"></v-select>
+        <v-select disabled placeholder="disabled" value="disabled"></v-select>
+        <v-select disabled multiple placeholder="disabled" :value="['disabled', 'multiple']"></v-select>
     </div>
 </body>
 

src/components/Select.vue

@@ -4,11 +4,6 @@
     font-family: sans-serif;
   }
 
-  .v-select .disabled {
-    cursor: not-allowed !important;
-    background-color: rgb(248, 248, 248) !important;
-  }
-
   .v-select,
   .v-select * {
     -webkit-box-sizing: border-box;
@@ -246,6 +241,16 @@
     width: 5em;
     height: 5em;
   }
+
+  /* Disabled state */
+  .v-select.disabled .dropdown-toggle,
+  .v-select.disabled .dropdown-toggle input,
+  .v-select.disabled .selected-tag .close,
+  .v-select.disabled .open-indicator {
+    cursor: not-allowed;
+    background-color: rgb(248, 248, 248);
+  }
+
   /* Loading Spinner States */
   .v-select.loading .spinner {
     opacity: 1;
@@ -280,13 +285,13 @@
 
 <template>
   <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
-    <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix', {'disabled': disabled}]">
+    <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
 
       <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
         <slot name="selected-option" v-bind="option">
           {{ getOptionLabel(option) }}
         </slot>
-        <button v-if="multiple" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
+        <button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
           <span aria-hidden="true">&times;</span>
         </button>
       </span>
@@ -302,7 +307,8 @@
               @blur="onSearchBlur"
               @focus="onSearchFocus"
               type="search"
-              :class="[{'disabled': disabled}, 'form-control']"
+              class="form-control"
+              :disabled="disabled"
               :placeholder="searchPlaceholder"
               :readonly="!searchable"
               :style="{ width: isValueEmpty ? '100%' : 'auto' }"
@@ -310,7 +316,7 @@
               aria-label="Search for option"
       >
 
-      <i v-if="!noDrop" ref="openIndicator" role="presentation" :class="[{'disabled': disabled}, 'open-indicator']"></i>
+      <i v-if="!noDrop" ref="openIndicator" role="presentation" class="open-indicator"></i>
 
       <slot name="spinner">
         <div class="spinner" v-show="mutableLoading">Loading...</div>
@@ -837,7 +843,8 @@
           searchable: this.searchable,
           unsearchable: !this.searchable,
           loading: this.mutableLoading,
-          rtl: this.dir === 'rtl'
+          rtl: this.dir === 'rtl',
+          disabled: this.disabled
         }
       },
 

test/unit/specs/Select.spec.js

@@ -693,6 +693,22 @@ describe('Select.vue', () => {
 			})
 		})
 
+		it('should not remove tag when close icon is clicked and component is disabled', (done) => {
+			const vm = new Vue({
+				template: '<div><v-select disabled multiple :options="options" v-model="value"></v-select></div>',
+				components: {vSelect},
+				data: {
+					value: ['one'],
+					options: ['one', 'two', 'three']
+				}
+			}).$mount()
+			vm.$children[0].$refs.toggle.querySelector('.close').click()
+			Vue.nextTick(() => {
+				expect(vm.$children[0].mutableValue).toEqual(['one'])
+				done()
+			})
+		})
+
 		it('should remove the last item in the value array on delete keypress when multiple is true', () => {
 
 			const vm = new Vue({