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

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