Closing dropdown on document click (#91)

* Closing dropdown on document click

* Formatting

client/ui/dropdown.js

@@ -51,4 +51,4 @@ class Dropdown {
 
 Dropdown.instances = 0;
 
-module.exports = Dropdown;
+module.exports = Dropdown;

ui/components/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown show">
+  <div class="dropdown show" ref="dropdownMenu">
       <button
         :id="_uid"
         class="btn btn-sm btn-light dropdown-toggle"
@@ -29,7 +29,22 @@ export default {
     return {
       isShown: false
     }
-  }
+  },
+  methods:{
+      documentClick(e) {
+        let el = this.$refs.dropdownMenu;
+        let target = e.target;
+        if ((el !== target) && (!el.contains(target))) {
+          this.isShown = false;
+        }
+      }
+    },
+    created () {
+      document.addEventListener('click', this.documentClick);
+    },
+    destroyed () {
+      document.removeEventListener('click', this.documentClick);
+    }
 };
 </script>
 <style lang="scss">
@@ -44,4 +59,3 @@ $dropdown-link-active-bg: $gray-300;
 }
 
 </style>
-

ui/plugins/frappeVue.js

@@ -35,4 +35,4 @@ export default function installFrappePlugin(Vue) {
       }
     }
   });
-}
+}