fix select behaviour in project member dropdown, fixes ST-308

resources/js/Components/Common/Member/MemberCombobox.vue

@@ -35,7 +35,7 @@ function isMemberSelected(id: string) {
     return model.value === id;
 }
 
-const { focused } = useFocus(searchInput, { initialValue: true });
+useFocus(searchInput, { initialValue: true });
 
 const filteredMembers = computed(() => {
     return members.value.filter((member) => {
@@ -142,18 +142,15 @@ const hasMemberSelected = computed(() => {
 });
 
 const showMembersDropdown = ref(true);
-
-function onUnfocus() {
-    // TODO this is a hack to prevent the dropdown from closing when clicking on the dropdown
-    setTimeout(() => {
-        if (!focused.value) {
-            showMembersDropdown.value = false;
-        }
-    }, 100);
-}
 </script>
 
 <template>
+    <Dropdown
+        align="bottom-start"
+        width="300"
+        v-model="showMembersDropdown"
+        :closeOnContentClick="true">
+        <template #trigger>
             <div class="flex relative">
                 <div
                     ref="reference"
@@ -175,16 +172,10 @@ function onUnfocus() {
                     @keydown.up.prevent="moveHighlightUp"
                     class="relative w-full pl-10"
                     @keydown.down.prevent="moveHighlightDown"
-            @focusin="showMembersDropdown = true"
-            @blur="onUnfocus"
                     placeholder="Search for a member..."
                     ref="searchInput" />
             </div>
-    <Dropdown
+        </template>
-        align="bottom-start"
-        width="300"
-        v-model="showMembersDropdown"
-        :closeOnContentClick="true">
         <template #content>
             <div
                 class="py-2 text-white px-3"