fix(MdSelect): make options in disabled groups un-selectable (#1293)

* fix(MdSelect): make options in disabled groups un-selectable fix #1286 * fix(MdSelect): make multiple selection checkboxes effective * style(MdOption): remove empty lines
vuematerial · Dec 22, 2017 · 89138eb · 89138eb
1 parent c9a2b9f
commit 89138eb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/components/MdField/MdSelect/MdOption.vue b/src/components/MdField/MdSelect/MdOption.vue
@@ -1,6 +1,6 @@
 <template>
   <md-menu-item :class="optionClasses" :disabled="isDisabled" @click="setSelection">
-    <md-checkbox class="md-primary" v-model="isChecked" v-if="MdSelect.multiple" />
+    <md-checkbox class="md-primary" v-model="isChecked" v-if="MdSelect.multiple" :disabled="isDisabled" />
 
     <span class="md-list-item-text" ref="text">
       <slot />
@@ -52,8 +52,17 @@
       }
     },
     watch: {
-      inputLabel () {
+      selectValue () {
         this.setIsSelected()
+      },
+      isChecked (val) {
+        if (val === this.isSelected) {
+          return
+        }
+        this.setSelection()
+      },
+      isSelected (val) {
+        this.isChecked = val
       }
     },
     methods: {
@@ -67,17 +76,24 @@
         return slot ? slot[0].text.trim() : ''
       },
       setIsSelected () {
-        this.isSelected = this.inputLabel === this.getTextContent()
+        if (!this.isMultiple) {
+          this.isSelected = this.selectValue === this.value
+          return
+        }
+        if (this.selectValue === undefined) {
+          this.isSelected = false
+          return
+        }
+        this.isSelected = this.selectValue.includes(this.value)
       },
       setSingleSelection () {
         this.MdSelect.setValue(this.value)
       },
       setMultipleSelection () {
-        this.isChecked = !this.isChecked
         this.MdSelect.setMultipleValue(this.value)
       },
       setSelection () {
-        if (!this.disabled) {
+        if (!this.isDisabled) {
           if (this.isMultiple) {
             this.setMultipleSelection()
           } else {
@@ -95,10 +111,6 @@
     created () {
       this.setItem()
       this.setIsSelected()
-
-      if (this.isMultiple && this.selectValue && this.selectValue.length) {
-        this.isChecked = this.selectValue.includes(this.value)
-      }
     }
   }
 </script>

diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue
@@ -89,7 +89,7 @@
           items: {},
           label: null,
           multiple: false,
-          modelValue: this.model,
+          modelValue: this.localValue,
           setValue: this.setValue,
           setContent: this.setContent,
           setMultipleValue: this.setMultipleValue,
@@ -115,6 +115,7 @@
         immediate: true,
         handler (val) {
           this.setFieldContent()
+          this.MdSelect.modelValue = this.localValue
           this.emitSelected(val)
         }
       },
@@ -124,9 +125,6 @@
           this.MdSelect.multiple = isMultiple
           this.$nextTick(() => this.initialLocalValueByDefault())
         }
-      },
-      model () {
-        this.MdSelect.modelValue = this.model
       }
     },
     methods: {