fix scroll & jumping issues with task dropdown, fixes ST-395

solidtime-io · Sep 6, 2024 · 776255d · 776255d
1 parent 3a3edbf
commit 776255d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git 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
@@ -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
@@ -33,7 +33,7 @@ watch(open, (isOpen) => {
     if (isOpen) {
         nextTick(() => {
             initializeHighlightedItem();
-            searchInput.value?.focus();
+            searchInput.value?.focus({ preventScroll: true });
         });
     }
 });