fix inconsistencies in dropdown highlighted item, indirectly fix flaky project member test

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;

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) {

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