From e302421765f2255778c75939a33c71a7a11f9b50 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 9 Jul 2026 12:33:56 +0200
Subject: [PATCH] make sure dropdown/combobox lists stay visible during close
 animation to avoid layout shifts

---
 e2e/timetracker.spec.ts                          | 11 ++++++++---
 .../Components/Common/Member/MemberCombobox.vue  | 10 ++++++++--
 .../Common/Project/ProjectDropdown.vue           | 16 ++++++++++------
 .../js/packages/ui/src/Client/ClientDropdown.vue | 11 ++++++++---
 .../ui/src/Input/MultiselectDropdown.vue         | 15 +++++++++++----
 resources/js/packages/ui/src/Tag/TagDropdown.vue |  4 +---
 .../TimeTrackerProjectTaskDropdown.vue           |  2 +-
 7 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/e2e/timetracker.spec.ts b/e2e/timetracker.spec.ts
index caff92cc..b49063d9 100644
--- a/e2e/timetracker.spec.ts
+++ b/e2e/timetracker.spec.ts
@@ -502,8 +502,10 @@ test.describe('Project Task Dropdown', () => {
         await projectOption.getByText(/Tasks/).click();
         await page.getByText(taskName, { exact: true }).click();
 
-        // The trigger reflects the selected task.
-        await expect(page.getByText(taskName)).toBeVisible();
+        // Scoped to the trigger button: the closing dropdown also contains the name while animating out.
+        await expect(
+            page.getByRole('button', { name: `${projectName} ${taskName}` })
+        ).toBeVisible();
     });
 
     test('test that keyboard navigation selects a project', async ({ page, ctx }) => {
@@ -654,7 +656,10 @@ test.describe('Project Task Dropdown', () => {
         await search.press('ArrowDown');
         await search.press('Enter');
 
-        await expect(page.getByText(taskName)).toBeVisible();
+        // Scoped to the trigger button: the closing dropdown also contains the name while animating out.
+        await expect(
+            page.getByRole('button', { name: `${projectName} ${taskName}` })
+        ).toBeVisible();
     });
 
     test('test that pressing space selects the highlighted project', async ({ page, ctx }) => {
diff --git a/resources/js/Components/Common/Member/MemberCombobox.vue b/resources/js/Components/Common/Member/MemberCombobox.vue
index c18e39db..9693e796 100644
--- a/resources/js/Components/Common/Member/MemberCombobox.vue
+++ b/resources/js/Components/Common/Member/MemberCombobox.vue
@@ -89,11 +89,17 @@ function selectMember(member: Member) {
             </Button>
         </template>
         <template #content>
+            <!-- kept open so the list stays visible during the popover close animation -->
             <ComboboxRoot
                 v-model:search-term="searchValue"
-                v-model:open="open"
+                :open="true"
                 class="relative"
-                :filter-function="(val: string[]) => val">
+                :filter-function="(val: string[]) => val"
+                @update:open="
+                    (value: boolean) => {
+                        if (!value) open = false;
+                    }
+                ">
                 <ComboboxAnchor>
                     <ComboboxInput
                         ref="searchInput"
diff --git a/resources/js/Components/Common/Project/ProjectDropdown.vue b/resources/js/Components/Common/Project/ProjectDropdown.vue
index c5a863f1..8377669a 100644
--- a/resources/js/Components/Common/Project/ProjectDropdown.vue
+++ b/resources/js/Components/Common/Project/ProjectDropdown.vue
@@ -37,9 +37,7 @@ const emit = defineEmits(['update:modelValue', 'changed']);
 
 const activeClients = computed(() => clients.value.filter((c) => !c.is_archived));
 
-// 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.
+// Pinned on open so rows don't re-sort while interacting; the project list itself stays reactive.
 const pinnedProjectId = ref<string | null>(null);
 
 const sortedProjects = computed(() => {
@@ -112,13 +110,19 @@ function updateValue(project: Project) {
         </template>
 
         <template #content>
-            <div v-if="open">
+            <!-- kept open so the list stays visible during the popover close animation -->
+            <div>
                 <ComboboxRoot
-                    v-model:open="open"
+                    :open="true"
                     :model-value="currentProject"
                     class="relative"
                     :ignore-filter="true"
-                    @update:model-value="updateValue">
+                    @update:model-value="updateValue"
+                    @update:open="
+                        (value: boolean) => {
+                            if (!value) open = false;
+                        }
+                    ">
                     <ComboboxAnchor>
                         <ComboboxInput
                             ref="searchInput"
diff --git a/resources/js/packages/ui/src/Client/ClientDropdown.vue b/resources/js/packages/ui/src/Client/ClientDropdown.vue
index b8b0598c..a7a98463 100644
--- a/resources/js/packages/ui/src/Client/ClientDropdown.vue
+++ b/resources/js/packages/ui/src/Client/ClientDropdown.vue
@@ -85,13 +85,18 @@ function updateValue(client: { id: string | null; name: string }) {
             <slot name="trigger"></slot>
         </template>
         <template #content>
-            <div v-if="open">
+            <div>
                 <ComboboxRoot
-                    v-model:open="open"
+                    :open="true"
                     :model-value="currentClient"
                     class="relative"
                     :ignore-filter="true"
-                    @update:model-value="updateValue">
+                    @update:model-value="updateValue"
+                    @update:open="
+                        (value: boolean) => {
+                            if (!value) open = false;
+                        }
+                    ">
                     <ComboboxAnchor>
                         <ComboboxInput
                             ref="searchInput"
diff --git a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
index e3306ede..e5fbf439 100644
--- a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
+++ b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
@@ -33,9 +33,7 @@ const props = defineProps<{
 
 const open = ref(false);
 const searchValue = ref('');
-// 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.
+// Pinned on open so rows don't re-sort while toggling; the item list itself stays reactive.
 const pinnedSelection = ref<Set<string>>(new Set());
 
 watch(open, (isOpen) => {
@@ -104,7 +102,16 @@ const emit = defineEmits(['update:modelValue', 'changed', 'submit']);
             <slot name="trigger"></slot>
         </template>
         <template #content>
-            <ComboboxRoot v-model:open="open" class="p-2" :ignore-filter="true">
+            <!-- kept open so the list stays visible during the popover close animation -->
+            <ComboboxRoot
+                :open="true"
+                class="p-2"
+                :ignore-filter="true"
+                @update:open="
+                    (value: boolean) => {
+                        if (!value) open = false;
+                    }
+                ">
                 <ComboboxAnchor>
                     <ComboboxInput
                         v-model="searchValue"
diff --git a/resources/js/packages/ui/src/Tag/TagDropdown.vue b/resources/js/packages/ui/src/Tag/TagDropdown.vue
index 4bca373e..d69b371b 100644
--- a/resources/js/packages/ui/src/Tag/TagDropdown.vue
+++ b/resources/js/packages/ui/src/Tag/TagDropdown.vue
@@ -37,9 +37,7 @@ const model = defineModel<string[]>({
 
 const open = ref(false);
 const searchValue = ref('');
-// 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.
+// Pinned on open so rows don't re-sort while toggling; the tag list itself stays reactive.
 const pinnedSelection = ref<Set<string>>(new Set());
 
 watch(open, (isOpen) => {
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index ea8275af..4f03d53c 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -594,7 +594,7 @@ const showCreateProject = ref(false);
             </slot>
         </template>
         <template #content>
-            <div v-if="open">
+            <div>
                 <input
                     ref="searchInput"
                     :value="searchValue"