From 8870304c15346257a90193807b9ae07c1393e3e2 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Sun, 29 May 2022 16:42:41 +0200
Subject: [PATCH] fix(UI): select closes clicking on scrollbar

---
 src/renderer/components/BaseSelect.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/BaseSelect.vue b/src/renderer/components/BaseSelect.vue
index 9b17e211..4262f19e 100644
--- a/src/renderer/components/BaseSelect.vue
+++ b/src/renderer/components/BaseSelect.vue
@@ -37,6 +37,8 @@
             v-if="isOpen"
             ref="optionList"
             :class="`select__list-wrapper ${dropdownClass ? dropdownClass : '' }`"
+            @mousedown="isMouseDown = true"
+            @mouseup="handleMouseUpEvent()"
          >
             <ul class="select__list" @mousedown.prevent>
                <li
@@ -136,6 +138,7 @@ export default defineComponent({
    setup (props, { emit }) {
       const hightlightedIndex = ref(0);
       const isOpen = ref(false);
+      const isMouseDown = ref(false);
       const internalValue = ref(props.modelValue || props.value);
       const el = ref(null);
       const searchInput = ref(null);
@@ -319,12 +322,24 @@ export default defineComponent({
       };
 
       const handleBlurEvent = () => {
+         if (isMouseDown.value) return;
          deactivate();
          emit('blur');
       };
 
+      const handleMouseUpEvent = () => {
+         isMouseDown.value = false;
+         searchInput.value.focus();
+      };
+
+      const handleWheelEvent = (e) => {
+         if (!e.target.className.includes('select__')) deactivate();
+      };
+
       onMounted(() => {
          window.addEventListener('resize', adjustListPosition);
+         window.addEventListener('wheel', handleWheelEvent);
+
          nextTick(() => {
             // fix position when the component is created and opened at the same time
             if (isOpen.value) {
@@ -336,6 +351,7 @@ export default defineComponent({
       });
       onUnmounted(() => {
          window.removeEventListener('resize', adjustListPosition);
+         window.removeEventListener('wheel', handleWheelEvent);
       });
 
       return {
@@ -351,10 +367,12 @@ export default defineComponent({
          isSelected,
          keyArrows,
          isOpen,
+         isMouseDown,
          hightlightedIndex,
          optionList,
          optionRefs,
-         handleBlurEvent
+         handleBlurEvent,
+         handleMouseUpEvent
       };
    }
 });