make sure dropdown/combobox lists stay visible during close animation to

avoid layout shifts

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.
+        // Scoped to the trigger button: the closing dropdown also contains the name while animating out.
-        await expect(page.getByText(taskName)).toBeVisible();
+        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 }) => {

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"

resources/js/Components/Common/Project/ProjectDropdown.vue

@@ -37,7 +37,16 @@ const emit = defineEmits(['update:modelValue', 'changed']);
 
 const activeClients = computed(() => clients.value.filter((c) => !c.is_archived));
 
-const sortedProjects = ref<Project[]>([]);
+// 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(() => {
+    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 +74,7 @@ watch(open, (isOpen) => {
             searchInput.value?.$el?.focus();
         });
 
-        sortedProjects.value = [...projects.value].sort((iteratingProject) => {
+        pinnedProjectId.value = model.value;
-            return model.value === iteratingProject.id ? -1 : 1;
-        });
     }
 });
 
@@ -103,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"

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"

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,18 +33,23 @@ const props = defineProps<{
 
 const open = ref(false);
 const searchValue = ref('');
-const sortedItems = ref<T[]>([]) as Ref<T[]>;
+// 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) => {
     if (isOpen) {
         searchValue.value = '';
-        sortedItems.value = [...props.items].sort((a, b) => {
+        pinnedSelection.value = new Set(model.value);
-            const aSelected = model.value.includes(props.getKeyFromItem(a)) ? 0 : 1;
+    }
-            const bSelected = model.value.includes(props.getKeyFromItem(b)) ? 0 : 1;
+});
+
+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(() => {
@@ -97,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"

resources/js/packages/ui/src/Tag/TagDropdown.vue

@@ -37,17 +37,22 @@ const model = defineModel<string[]>({
 
 const open = ref(false);
 const searchValue = ref('');
-const sortedTags = ref<Tag[]>([]);
+// 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) => {
     if (isOpen) {
         searchValue.value = '';
-        sortedTags.value = [...props.tags].sort((a, b) => {
+        pinnedSelection.value = new Set(model.value);
-            const aSelected = model.value.includes(a.id) ? 0 : 1;
+    }
-            const bSelected = model.value.includes(b.id) ? 0 : 1;
+});
+
+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(() => {

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"

tests/Unit/Endpoint/Api/V1/ClientEndpointTest.php

@@ -45,7 +45,7 @@ class ClientEndpointTest extends ApiEndpointTestAbstract
         // Assert
         $response->assertStatus(200);
         $response->assertJsonCount(4, 'data');
-        $clients = Client::query()->orderBy('created_at', 'desc')->get();
+        $clients = Client::query()->orderBy('created_at', 'desc')->orderBy('id')->get();
         $response->assertJson(fn (AssertableJson $json) => $json
             ->has('data')
             ->has('links')
@@ -84,9 +84,12 @@ class ClientEndpointTest extends ApiEndpointTestAbstract
             ->has('links')
             ->has('meta')
             ->count('data', 2)
-            ->where('data.0.id', $clients->get(0)->getKey())
-            ->where('data.1.id', $clients->get(1)->getKey())
         );
+        // Both clients share the same created_at, so their relative order is not defined.
+        $this->assertEqualsCanonicalizing([
+            $clients->get(0)->getKey(),
+            $clients->get(1)->getKey(),
+        ], $response->json('data.*.id'));
     }
 
     public function test_index_endpoint_without_filter_archived_returns_only_non_archived_clients(): void

tests/Unit/Endpoint/Api/V1/ReportEndpointTest.php

@@ -51,7 +51,7 @@ class ReportEndpointTest extends ApiEndpointTestAbstract
         // Assert
         $response->assertStatus(200);
         $response->assertJsonCount(4, 'data');
-        $reports = Report::query()->orderBy('created_at', 'desc')->get();
+        $reports = Report::query()->orderBy('created_at', 'desc')->orderBy('id')->get();
         $response->assertJson(fn (AssertableJson $json) => $json
             ->has('data')
             ->has('links')

tests/Unit/Endpoint/Api/V1/TagEndpointTest.php

@@ -44,7 +44,7 @@ class TagEndpointTest extends ApiEndpointTestAbstract
         // Assert
         $response->assertStatus(200);
         $response->assertJsonCount(4, 'data');
-        $tags = Tag::query()->orderBy('created_at', 'desc')->get();
+        $tags = Tag::query()->orderBy('created_at', 'desc')->orderBy('id')->get();
         $response->assertJson(fn (AssertableJson $json) => $json
             ->has('data')
             ->has('links')