Refactor select.vue to use the outside click directive [SCI-9496]

app/javascript/packs/vue/directives/outside_click.js

@@ -16,7 +16,9 @@ export default {
       exclude.forEach(refName => {
         if (!clickedOnExcludedEl) {
           const excludedEl = vnode.context.$refs[refName];
-          clickedOnExcludedEl = excludedEl?.contains(e.target);
+          if (!excludedEl) return;
+
+          clickedOnExcludedEl = (excludedEl._isVue ? excludedEl.$el : excludedEl).contains(e.target);
         }
       });
 

app/javascript/vue/shared/select.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click="toggle" ref="container" class="sn-select" :class="{ 'sn-select--open': isOpen, 'sn-select--blank': !valueLabel, 'disabled': disabled }">
+  <div v-click-outside="{ handler: 'close', exclude: ['optionsContainer'] }" @click="toggle" ref="container" class="sn-select" :class="{ 'sn-select--open': isOpen, 'sn-select--blank': !valueLabel, 'disabled': disabled }">
     <slot>
       <button ref="focusElement" class="sn-select__value">
         <span>{{ valueLabel || (placeholder || i18n.t('general.select')) }}</span>
@@ -37,6 +37,7 @@
 </template>
 <script>
   import PerfectScrollbar from 'vue2-perfect-scrollbar';
+  import outsideClick from '../../packs/vue/directives/outside_click';
 
   export default {
     name: 'Select',
@@ -48,12 +49,13 @@
       noOptionsPlaceholder: { type: String },
       disabled: { type: Boolean, default: false }
     },
-    comments: { PerfectScrollbar },
+    directives: {
+      'click-outside': outsideClick
+    },
     data() {
       return {
         isOpen: false,
-        optionPositionStyle: '',
-        blurPrevented: false
+        optionPositionStyle: ''
       }
     },
     computed: {
@@ -66,34 +68,13 @@
       }
     },
     mounted() {
-      this.focusElement.onblur = this.blur;
       document.addEventListener('scroll', this.updateOptionPosition);
     },
     beforeDestroy() {
       document.removeEventListener('scroll', this.updateOptionPosition);
     },
     methods: {
-      preventBlur() {
-        this.blurPrevented = true;
-      },
-      allowBlur() {
-        setTimeout(() => { this.blurPrevented = false }, 200);
-      },
-      blur() {
-        setTimeout(() => {
-          if (this.blurPrevented) {
-            this.focusElement.focus();
-          } else {
-            this.isOpen = false;
-            this.$emit('blur');
-          }
-        }, 100);
-      },
       toggle() {
-        if (this.isOpen && this.blurPrevented) {
-          return;
-        }
-
         this.isOpen = !this.isOpen;
 
         if (this.isOpen) {
@@ -103,14 +84,16 @@
           });
           this.$refs.optionsContainer.scrollTop = 0;
           this.updateOptionPosition();
-          this.setUpBlurHandlers();
         } else {
-          this.optionPositionStyle = '';
-          this.$emit('close');
+          this.close()
         }
       },
+      close() {
+        this.isOpen = false;
+        this.optionPositionStyle = '';
+        this.$emit('close');
+      },
       setValue(value) {
-        this.focusElement.blur();
         this.$emit('change', value);
       },
       updateOptionPosition() {
@@ -129,13 +112,6 @@
         }
 
         this.optionPositionStyle = `position: fixed; top: ${top}px; left: ${left}px; width: ${width}px`
-      },
-      setUpBlurHandlers() {
-        setTimeout(() => {
-          this.$refs.optionsContainer.$el.querySelector('.ps__thumb-y').addEventListener('mousedown', this.preventBlur);
-          this.$refs.optionsContainer.$el.querySelector('.ps__thumb-y').addEventListener('mouseup', this.allowBlur);
-          document.addEventListener('mouseup', this.allowBlur);
-        }, 100);
       }
     }
   }