From 776255d91fd005615149ee0b6db844e80f6d5ae7 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Fri, 6 Sep 2024 17:29:03 +0200
Subject: [PATCH] fix scroll & jumping issues with task dropdown, fixes ST-395

---
 e2e/clients.spec.ts                           | 30 +++++++++++++++++++
 .../js/packages/ui/src/Input/Dropdown.vue     |  6 ++--
 .../TimeTrackerProjectTaskDropdown.vue        |  2 +-
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/e2e/clients.spec.ts b/e2e/clients.spec.ts
index 2eb34682..733b9d26 100644
--- a/e2e/clients.spec.ts
+++ b/e2e/clients.spec.ts
@@ -50,4 +50,34 @@ test('test that creating and deleting a new client via the modal works', async (
     );
 });
 
+test('test that archiving and unarchiving clients works', async ({ page }) => {
+    const newClientName = 'New Client ' + Math.floor(1 + Math.random() * 10000);
+    await goToProjectsOverview(page);
+    await page.getByRole('button', { name: 'Create Client' }).click();
+    await page.getByLabel('Client Name').fill(newClientName);
+
+    await page.getByRole('button', { name: 'Create Client' }).nth(1).click();
+    await expect(page.getByText(newClientName)).toBeVisible();
+
+    await page.getByRole('row').first().getByRole('button').click();
+    await Promise.all([
+        page.getByRole('button').getByText('Archive').first().click(),
+        expect(page.getByText(newClientName)).not.toBeVisible(),
+    ]);
+    await Promise.all([
+        page.getByRole('tab', { name: 'Archived' }).click(),
+        expect(page.getByText(newClientName)).toBeVisible(),
+    ]);
+
+    await page.getByRole('row').first().getByRole('button').click();
+    await Promise.all([
+        page.getByRole('button').getByText('Unarchive').first().click(),
+        expect(page.getByText(newClientName)).not.toBeVisible(),
+    ]);
+    await Promise.all([
+        page.getByRole('tab', { name: 'Active' }).click(),
+        expect(page.getByText(newClientName)).toBeVisible(),
+    ]);
+});
+
 // TODO: Add Name Update Test
diff --git a/resources/js/packages/ui/src/Input/Dropdown.vue b/resources/js/packages/ui/src/Input/Dropdown.vue
index 4404cdf8..fa3f21be 100644
--- a/resources/js/packages/ui/src/Input/Dropdown.vue
+++ b/resources/js/packages/ui/src/Input/Dropdown.vue
@@ -62,19 +62,21 @@ const { floatingStyles } = useFloating(reference, floating, {
     placement: props.align,
     whileElementsMounted: autoUpdate,
     middleware: [
-        flip(),
         offset(10),
         shift({
             limiter: limitShift({
                 offset: 5,
             }),
         }),
+        flip({
+            fallbackAxisSideDirection: 'start',
+        }),
     ],
 });
 </script>
 
 <template>
-    <div class="min-w-0">
+    <div class="min-w-0 isolate">
         <div @click.prevent="toggleOpen" ref="reference" class="min-w-0">
             <slot name="trigger" />
         </div>
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index cf717f3a..83668cf6 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -33,7 +33,7 @@ watch(open, (isOpen) => {
     if (isOpen) {
         nextTick(() => {
             initializeHighlightedItem();
-            searchInput.value?.focus();
+            searchInput.value?.focus({ preventScroll: true });
         });
     }
 });