fix: InputSelect dropdowns

src/renderer/components/Input/InputSelect.vue

@@ -7,45 +7,44 @@
     class="InputSelect"
     @select="onDropdownSelect"
   >
-    <div
+    <template
       v-if="hasItemSlot"
-      slot="item"
-      slot-scope="itemScope"
+      v-slot:item="itemScope"
     >
       <slot
         name="input-item"
         v-bind="itemScope"
       />
-    </div>
-
-    <InputField
-      slot="handler"
-      slot-scope="handlerScope"
-      :name="name"
-      :label="inputLabel"
-      :value="optionText"
-      :is-dirty="isDirty"
-      :is-disabled="isDisabled"
-      :is-focused="isFocused"
-      :is-invalid="isInvalid"
-    >
-      <MenuDropdownHandler
-        slot-scope="{ inputClass }"
-        :value="handlerScope.value"
-        :item="handlerScope.item"
-        :class="inputClass"
-        :placeholder="label"
-        :on-blur="onBlur"
-        class="InputSelect__input"
-        @click="onHandlerClick"
+    </template>
+
+    <template v-slot:handler="handlerScope">
+      <InputField
+        :name="name"
+        :label="inputLabel"
+        :value="optionText"
+        :is-dirty="isDirty"
+        :is-disabled="isDisabled"
+        :is-focused="isFocused"
+        :is-invalid="isInvalid"
       >
-        <slot
-          v-if="hasHandlerSlot"
-          name="input-handler"
-          v-bind="handlerScope"
-        />
-      </MenuDropdownHandler>
-    </InputField>
+        <MenuDropdownHandler
+          slot-scope="{ inputClass }"
+          :value="handlerScope.value"
+          :item="handlerScope.item"
+          :class="inputClass"
+          :placeholder="label"
+          class="InputSelect__input"
+          @blur="onBlur"
+          @click="onHandlerClick"
+        >
+          <slot
+            v-if="hasHandlerSlot"
+            name="input-handler"
+            v-bind="handlerScope"
+          />
+        </MenuDropdownHandler>
+      </InputField>
+    </template>
   </MenuDropdown>
 </template>
 
@@ -149,6 +148,17 @@ export default {
       this.$emit('input', this.optionValue)
     },
 
+    onBlur (event) {
+      // To ensure that the code is evaluated after other tasks
+      setTimeout(() => {
+        if (Object.values(document.activeElement.classList).includes('MenuDropdownItem__button')) {
+          event.preventDefault()
+        } else {
+          this.$refs.dropdown.close()
+        }
+      }, 0)
+    },
+
     onHandlerClick () {
       this.isFocused = true
     },
@@ -158,16 +168,6 @@ export default {
       this.optionValue = selectedValue
 
       this.emitInput()
-    },
-
-    onBlur (ev) {
-      this.$nextTick(() => {
-        if (Object.values(document.activeElement.classList).includes('MenuDropdownItem__button')) {
-          ev.preventDefault()
-        } else {
-          this.$refs.dropdown.close()
-        }
-      })
     }
   }
 }

src/renderer/components/Menu/MenuDropdown/MenuDropdown.vue

@@ -6,7 +6,7 @@
       v-if="!hasDefaultSlot"
       :disabled="isDisabled"
       class="appearance-none text-inherit w-full"
-      @click.stop="buttonClick"
+      @click.stop="handlerWrapperClick"
     >
       <slot
         :active-value="activeValue"
@@ -177,7 +177,7 @@ export default {
       this.$emit('select', item)
     },
 
-    buttonClick () {
+    handlerWrapperClick () {
       this.toggle()
       this.$emit('click')
     },

src/renderer/components/Menu/MenuDropdown/MenuDropdownHandler.vue

@@ -3,8 +3,8 @@
     :class="[
       value ? '' : 'text-theme-page-text-light hover:text-theme-page-text',
       'MenuDropdownHandler cursor-pointer transition flex justify-between items-center text-inherit']"
+    @blur="emitBlur"
     @click="emitClick"
-    @blur="onBlur"
   >
     <span>
       <slot>
@@ -70,16 +70,14 @@ export default {
       type: String,
       required: false,
       default: ''
-    },
-
-    onBlur: {
-      type: Function,
-      required: false,
-      default: () => {}
     }
   },
 
   methods: {
+    emitBlur (event) {
+      this.$emit('blur', event)
+    },
+
     emitClick () {
       this.$emit('click')
     }