From 427c904747673b119c8da317f4be749dfaba5844 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 13 Feb 2025 12:51:28 +0100
Subject: [PATCH] fix inconsistencies in dropdown highlighted item, indirectly
 fix flaky project member test

---
 .../Common/Member/MemberCombobox.vue           | 18 +-----------------
 .../packages/ui/src/Input/SelectDropdown.vue   | 18 +++++++++++++++---
 .../ui/src/TimeEntry/TimeEntryCreateModal.vue  |  1 -
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/resources/js/Components/Common/Member/MemberCombobox.vue b/resources/js/Components/Common/Member/MemberCombobox.vue
index 9755447e..ed11cf10 100644
--- a/resources/js/Components/Common/Member/MemberCombobox.vue
+++ b/resources/js/Components/Common/Member/MemberCombobox.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useMembersStore } from '@/utils/useMembers';
 import { UserIcon, ChevronDownIcon } from '@heroicons/vue/24/solid';
@@ -46,22 +46,6 @@ const filteredMembers = computed<Member[]>(() => {
     });
 });
 
-watch(filteredMembers, () => {
-    resetHighlightedItem();
-});
-
-onMounted(() => {
-    resetHighlightedItem();
-});
-
-function resetHighlightedItem() {
-    if (filteredMembers.value.length > 0) {
-        highlightedItemId.value = filteredMembers.value[0].id;
-    }
-}
-
-const highlightedItemId = ref<string | null>(null);
-
 const currentValue = computed(() => {
     if (model.value) {
         return members.value.find((member) => member.id === model.value)?.name;
diff --git a/resources/js/packages/ui/src/Input/SelectDropdown.vue b/resources/js/packages/ui/src/Input/SelectDropdown.vue
index ba7fdabe..231f1c1c 100644
--- a/resources/js/packages/ui/src/Input/SelectDropdown.vue
+++ b/resources/js/packages/ui/src/Input/SelectDropdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { computed, nextTick, ref, watch } from 'vue';
+import {computed, nextTick, onMounted, ref, watch} from 'vue';
 import SelectDropdownItem from '@/packages/ui/src/Input/SelectDropdownItem.vue';
 import { onKeyStroke } from '@vueuse/core';
 import { type Placement } from '@floating-ui/vue';
@@ -43,10 +43,22 @@ const filteredItems = computed<T[]>(() => {
 const highlightedItemId = ref<string | null>(model.value);
 
 watch(model, () => {
-    highlightedItemId.value = model.value;
+    if(model.value){
+        highlightedItemId.value = model.value;
+    }
+});
+
+onMounted(() => {
+    if (!highlightedItemId.value) {
+        resetHightlightedItem();
+    }
 });
 
 watch(filteredItems, () => {
+    resetHightlightedItem();
+});
+
+function resetHightlightedItem(){
     if (
         filteredItems.value.length > 0 &&
         filteredItems.value.find(
@@ -55,7 +67,7 @@ watch(filteredItems, () => {
     ) {
         highlightedItemId.value = props.getKeyFromItem(filteredItems.value[0]);
     }
-});
+}
 
 watch(highlightedItemId, () => {
     if (highlightedItemId.value) {
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
index 06c06ec5..e4f21dd5 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
@@ -175,7 +175,6 @@ type BillableOption = {
                                         size="xlarge">
                                         <TagIcon
                                             v-if="timeEntry.tags.length === 0"
-                                            tag="button"
                                             class="w-4"></TagIcon>
                                         <div
                                             v-else