From 75f5144b450ab347ae28c1183d34c031fcaf2e34 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Wed, 8 Jul 2026 18:06:58 +0200
Subject: [PATCH] use pinned selection instead of fix items on dropdown open so
 async loaded collections update the dropdown properly

---
 .../Common/Project/ProjectDropdown.vue        | 17 ++++++++++----
 .../ui/src/Input/MultiselectDropdown.vue      | 23 ++++++++++++-------
 .../js/packages/ui/src/Tag/TagDropdown.vue    | 19 ++++++++++-----
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/resources/js/Components/Common/Project/ProjectDropdown.vue b/resources/js/Components/Common/Project/ProjectDropdown.vue
index c37de296..c5a863f1 100644
--- a/resources/js/Components/Common/Project/ProjectDropdown.vue
+++ b/resources/js/Components/Common/Project/ProjectDropdown.vue
@@ -37,7 +37,18 @@ const emit = defineEmits(['update:modelValue', 'changed']);
 
 const activeClients = computed(() => clients.value.filter((c) => !c.is_archived));
 
-const sortedProjects = ref<Project[]>([]);
+// The selected project is pinned when the dropdown opens so rows don't re-sort while
+// the user interacts, but the project list itself stays reactive — projects may still
+// be loading (fetchAllPages) when the dropdown opens.
+const pinnedProjectId = ref<string | null>(null);
+
+const sortedProjects = computed(() => {
+    return [...projects.value].sort((a, b) => {
+        const aPinned = pinnedProjectId.value === a.id ? 0 : 1;
+        const bPinned = pinnedProjectId.value === b.id ? 0 : 1;
+        return aPinned - bPinned;
+    });
+});
 
 const shownProjects = computed(() => {
     return sortedProjects.value.filter((project) => {
@@ -65,9 +76,7 @@ watch(open, (isOpen) => {
             searchInput.value?.$el?.focus();
         });
 
-        sortedProjects.value = [...projects.value].sort((iteratingProject) => {
-            return model.value === iteratingProject.id ? -1 : 1;
-        });
+        pinnedProjectId.value = model.value;
     }
 });
 
diff --git a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
index 9fd314b8..e3306ede 100644
--- a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
+++ b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { computed, type Ref, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import Checkbox from '@/packages/ui/src/Input/Checkbox.vue';
 import {
     ComboboxAnchor,
@@ -33,20 +33,27 @@ const props = defineProps<{
 
 const open = ref(false);
 const searchValue = ref('');
-const sortedItems = ref<T[]>([]) as Ref<T[]>;
+// The selection is pinned when the dropdown opens so rows don't re-sort while the user
+// toggles checkboxes, but the item list itself stays reactive — items may still be
+// loading (fetchAllPages) when the dropdown opens.
+const pinnedSelection = ref<Set<string>>(new Set());
 
 watch(open, (isOpen) => {
     if (isOpen) {
         searchValue.value = '';
-        sortedItems.value = [...props.items].sort((a, b) => {
-            const aSelected = model.value.includes(props.getKeyFromItem(a)) ? 0 : 1;
-            const bSelected = model.value.includes(props.getKeyFromItem(b)) ? 0 : 1;
-            if (aSelected !== bSelected) return aSelected - bSelected;
-            return props.getNameForItem(a).localeCompare(props.getNameForItem(b));
-        });
+        pinnedSelection.value = new Set(model.value);
     }
 });
 
+const sortedItems = computed(() => {
+    return [...props.items].sort((a, b) => {
+        const aSelected = pinnedSelection.value.has(props.getKeyFromItem(a)) ? 0 : 1;
+        const bSelected = pinnedSelection.value.has(props.getKeyFromItem(b)) ? 0 : 1;
+        if (aSelected !== bSelected) return aSelected - bSelected;
+        return props.getNameForItem(a).localeCompare(props.getNameForItem(b));
+    });
+});
+
 const filteredItems = computed(() => {
     const search = searchValue.value.toLowerCase().trim();
     if (!search) return sortedItems.value;
diff --git a/resources/js/packages/ui/src/Tag/TagDropdown.vue b/resources/js/packages/ui/src/Tag/TagDropdown.vue
index 916342a8..4bca373e 100644
--- a/resources/js/packages/ui/src/Tag/TagDropdown.vue
+++ b/resources/js/packages/ui/src/Tag/TagDropdown.vue
@@ -37,19 +37,26 @@ const model = defineModel<string[]>({
 
 const open = ref(false);
 const searchValue = ref('');
-const sortedTags = ref<Tag[]>([]);
+// The selection is pinned when the dropdown opens so rows don't re-sort while the user
+// toggles tags, but the tag list itself stays reactive — tags may still be loading
+// when the dropdown opens.
+const pinnedSelection = ref<Set<string>>(new Set());
 
 watch(open, (isOpen) => {
     if (isOpen) {
         searchValue.value = '';
-        sortedTags.value = [...props.tags].sort((a, b) => {
-            const aSelected = model.value.includes(a.id) ? 0 : 1;
-            const bSelected = model.value.includes(b.id) ? 0 : 1;
-            return aSelected - bSelected;
-        });
+        pinnedSelection.value = new Set(model.value);
     }
 });
 
+const sortedTags = computed(() => {
+    return [...props.tags].sort((a, b) => {
+        const aSelected = pinnedSelection.value.has(a.id) ? 0 : 1;
+        const bSelected = pinnedSelection.value.has(b.id) ? 0 : 1;
+        return aSelected - bSelected;
+    });
+});
+
 const filteredTags = computed(() => {
     const search = searchValue.value.toLowerCase().trim();
     if (!search) return sortedTags.value;