bug fixes for select with data tables

vuetifyjs · Mar 30, 2017 · f154158 · f154158
1 parent 6fff4df
commit f154158
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 26 deletions.
diff --git a/src/components/menus/Menu.js b/src/components/menus/Menu.js
@@ -76,6 +76,10 @@ export default {
       type: Boolean,
       default: true
     },
+    closeOnContentClick: {
+      type: Boolean,
+      default: true
+    },
     activator: {
       default: null
     },
@@ -185,10 +189,6 @@ export default {
 
     activatorXY (val) {
       this.isActive = true
-    },
-
-    value (val) {
-      this.isActive = val
     }
   },
 
@@ -227,7 +227,7 @@ export default {
     },
 
     activatorClickHandler () {
-      if (this.openOnClick && !this.isActive) this.isActive = !this.isActive && !this.disabled
+      if (this.openOnClick) this.isActive = !this.isActive && !this.disabled
     },
 
     addActivatorEvents (activator = null) {
@@ -390,7 +390,15 @@ export default {
           name: 'show',
           value: this.isContentActive
         }],
-        'class': { 'menu__content': true }
+        'class': { 'menu__content': true },
+        on: {
+          click: e => {
+            if (this.closeOnContentClick) {
+              e.stopPropagation()
+              this.isActive = false
+            }
+          }
+        }
       }
 
       return h('div', data, [this.isBooted ? this.$slots.default : null])
@@ -432,21 +440,23 @@ export default {
       'class': {
         'menu': true
       },
-      directives: [
-        {
-          name: 'click-outside',
-          value: e => {
-            const a = this.activator
-            if (!this.closeOnClick || a && (a === e.target || a.contains(e.target))) return false
-            return true
-          }
-        }
-      ],
+      directives: [],
       on: {
         'keyup': e => { if (e.keyCode === 27) this.isActive = false }
       }
     }
 
+    if (this.closeOnClick) {
+      data.directives.push({
+        name: 'click-outside',
+        value: e => {
+          const a = this.activator
+          if (a && (a === e.target || a.contains(e.target))) return false
+          return true
+        }
+      })
+    }
+
     return h('div', data, [this.genActivator(h), this.genTransition(h)])
   }
 }
diff --git a/src/components/selects/mixins/generators.js b/src/components/selects/mixins/generators.js
@@ -5,7 +5,7 @@ export default {
         ref: 'menu',
         props: {
           auto: this.auto,
-          closeOnClick: !this.multiple,
+          closeOnContentClick: !this.multiple,
           disabled: this.disabled,
           offsetY: this.autocomplete || this.offset,
           value: this.menuActive,
@@ -15,9 +15,7 @@ export default {
           nudgeXAuto: this.multiple ? -40 : -16,
           nudgeWidth: 25,
           maxHeight: this.maxHeight,
-          activator: this.$refs.activator,
-          top: this.top || !this.bottom,
-          bottom: this.bottom
+          activator: this.$refs.activator
         },
         on: {
           input: val => (this.menuActive = val)
@@ -55,7 +53,8 @@ export default {
 
       return this.$createElement('div', {
         'class': 'input-group__selections',
-        style: { 'overflow': 'hidden' }
+        style: { 'overflow': 'hidden' },
+        ref: 'activator'
       }, [group, input])
     },
     genSelections () {

diff --git a/src/components/tables/SmallDialog.js b/src/components/tables/SmallDialog.js
@@ -45,17 +45,16 @@ export default {
         transition: this.transition,
         origin: 'top right',
         right: true,
-        activator: this.$refs.activator,
-        value: this.isActive
+        value: this.isActive,
+        closeOnContentClick: false
       },
       on: {
         input: val => (this.isActive = val)
       }
     }, [
       h('a', {
         domProps: { href: 'javascript:;' },
-        slot: 'activator',
-        ref: 'activator'
+        slot: 'activator'
       }, [this.$slots.default]),
       h('div', {
         'class': 'small-dialog__content',

diff --git a/src/mixins/toggleable.js b/src/mixins/toggleable.js
@@ -11,7 +11,7 @@ export default {
 
   watch: {
     value () {
-      // this.isActive = this.value
+      this.isActive = this.value
     },
     isActive () {
       this.$emit('input', this.isActive)