From 375cee7589af0f67adbdb392b9226d47c9802e79 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 9 Jul 2024 12:11:03 +0200
Subject: [PATCH] fix select behaviour in project member dropdown, fixes ST-308

---
 .../Common/Member/MemberCombobox.vue          | 63 ++++++++-----------
 1 file changed, 27 insertions(+), 36 deletions(-)

diff --git a/resources/js/Components/Common/Member/MemberCombobox.vue b/resources/js/Components/Common/Member/MemberCombobox.vue
index ed0f97f9..3980f5d8 100644
--- a/resources/js/Components/Common/Member/MemberCombobox.vue
+++ b/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,49 +142,40 @@ 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>
-    <div class="flex relative">
-        <div
-            ref="reference"
-            class="absolute h-full items-center px-3 w-full flex justify-between">
-            <UserIcon class="relative z-10 w-4 text-muted"></UserIcon>
-            <button
-                v-if="hasMemberSelected"
-                @click="model = ''"
-                class="focus:text-accent-200 focus:bg-card-background text-muted">
-                <XMarkIcon class="relative z-10 w-4"></XMarkIcon>
-            </button>
-        </div>
-        <TextInput
-            :value="currentValue"
-            :disabled="disabled"
-            @input="updateSearchValue"
-            data-testid="member_dropdown_search"
-            @keydown.enter.prevent="updateMember(highlightedItemId)"
-            @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
         align="bottom-start"
         width="300"
         v-model="showMembersDropdown"
         :closeOnContentClick="true">
+        <template #trigger>
+            <div class="flex relative">
+                <div
+                    ref="reference"
+                    class="absolute h-full items-center px-3 w-full flex justify-between">
+                    <UserIcon class="relative z-10 w-4 text-muted"></UserIcon>
+                    <button
+                        v-if="hasMemberSelected"
+                        @click="model = ''"
+                        class="focus:text-accent-200 focus:bg-card-background text-muted">
+                        <XMarkIcon class="relative z-10 w-4"></XMarkIcon>
+                    </button>
+                </div>
+                <TextInput
+                    :value="currentValue"
+                    :disabled="disabled"
+                    @input="updateSearchValue"
+                    data-testid="member_dropdown_search"
+                    @keydown.enter.prevent="updateMember(highlightedItemId)"
+                    @keydown.up.prevent="moveHighlightUp"
+                    class="relative w-full pl-10"
+                    @keydown.down.prevent="moveHighlightDown"
+                    placeholder="Search for a member..."
+                    ref="searchInput" />
+            </div>
+        </template>
         <template #content>
             <div
                 class="py-2 text-white px-3"