fix(field-select): options kept open when clicking somewhere else

Author: kevinkosterr

src/directives/onClickOutside.js

@@ -0,0 +1,15 @@
+export default {
+  beforeMount(el, binding) {
+    el.clickOutsideEvent = (event) => {
+      if (!(el === event.target || el.contains(event.target))) {
+        if (typeof binding.value === 'function') {
+          binding.value(event)
+        }
+      }
+    }
+    document.addEventListener('click', el.clickOutsideEvent)
+  },
+  unmounted(el) {
+    document.removeEventListener('click', el.clickOutsideEvent)
+  }
+}

src/fields/input/FieldSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vfg-select">
-    <span class="vfg-select-label" :class="{'text-muted': !selectedName}" @click.prevent="onClickInput">
+    <span v-on-click-outside="() => isOpened = false" class="vfg-select-label" :class="{'text-muted': !selectedName}" @click.prevent="onClickInput">
       <template v-if="selectedName">{{ selectedName }}</template>
       <template v-else>{{ field.placeholder || 'Select an option' }}</template>
       <span style="float:right;">
@@ -32,9 +32,11 @@
 
 <script>
 import { abstractField } from '@/mixins'
+import onClickOutside from '@/directives/onClickOutside.js'
 
 export default {
   name: 'FieldSelect',
+  directives: { onClickOutside },
   mixins: [ abstractField ],
   data () {
     return {