diff --git a/apps/web/playwright/bookings-list.e2e.ts b/apps/web/playwright/bookings-list.e2e.ts index 25bfddcd96..73787836ac 100644 --- a/apps/web/playwright/bookings-list.e2e.ts +++ b/apps/web/playwright/bookings-list.e2e.ts @@ -5,7 +5,7 @@ import prisma from "@calcom/prisma"; import { BookingStatus } from "@calcom/prisma/client"; import { MembershipRole, SchedulingType } from "@calcom/prisma/enums"; -import { addFilter, openFilter } from "./filter-helpers"; +import { addFilter } from "./filter-helpers"; import { createTeamEventType } from "./fixtures/users"; import type { Fixtures } from "./lib/fixtures"; import { test } from "./lib/fixtures"; @@ -78,7 +78,6 @@ test.describe("Bookings", () => { await bookingsGetResponse; await addFilter(page, "dateRange"); - await openFilter(page, "dateRange"); await expect(page.locator('[data-testid="date-range-options-c"]')).toBeHidden(); await expect(page.locator('[data-testid="date-range-options-w"]')).toBeHidden(); @@ -244,7 +243,6 @@ test.describe("Bookings", () => { await bookingsGetResponse; await addFilter(page, "dateRange"); - await openFilter(page, "dateRange"); await expect(page.locator('[data-testid="date-range-options-c"]')).toBeVisible(); await expect(page.locator('[data-testid="date-range-options-w"]')).toBeVisible(); @@ -354,7 +352,6 @@ test.describe("Bookings", () => { await bookingsGetResponse; await addFilter(page, "userId"); - await openFilter(page, "userId"); const bookingsGetResponse2 = page.waitForResponse( (response) => response.url().includes("/api/trpc/bookings/get?batch=1") && response.status() === 200 @@ -463,7 +460,6 @@ test.describe("Bookings", () => { await bookingsGetResponse1; await addFilter(page, "userId"); - await openFilter(page, "userId"); const bookingsGetResponse2 = page.waitForResponse((response) => /\/api\/trpc\/bookings\/get.*/.test(response.url()) ); diff --git a/apps/web/playwright/filter-helpers.ts b/apps/web/playwright/filter-helpers.ts index 987a1d4c6a..70b07e3782 100644 --- a/apps/web/playwright/filter-helpers.ts +++ b/apps/web/playwright/filter-helpers.ts @@ -17,15 +17,20 @@ export async function openFilter(page: Page, columnId: string) { await page.getByTestId(`filter-popover-trigger-${columnId}`).click(); } +export async function addOrOpenFilter(page: Page, columnId: string) { + const existingFilter = page.getByTestId(`filter-popover-trigger-${columnId}`); + if (await existingFilter.isVisible()) { + await openFilter(page, columnId); + } else { + await addFilter(page, columnId); + } +} + /** * Apply a filter with a specific value */ export async function applySelectFilter(page: Page, columnId: string, value: string) { - const existingFilter = page.getByTestId(`filter-popover-trigger-${columnId}`); - if (!(await existingFilter.isVisible())) { - await addFilter(page, columnId); - } - await openFilter(page, columnId); + await addOrOpenFilter(page, columnId); await selectOptionValue(page, columnId, value); await page.keyboard.press("Escape"); } @@ -36,11 +41,7 @@ export async function selectOptionValue(page: Page, columnId: string, value: str } export async function applyTextFilter(page: Page, columnId: string, operator: string, operand?: string) { - const existingFilter = page.getByTestId(`filter-popover-trigger-${columnId}`); - if (!(await existingFilter.isVisible())) { - await addFilter(page, columnId); - } - await openFilter(page, columnId); + await addOrOpenFilter(page, columnId); await page.getByTestId(`text-filter-options-select-${columnId}`).click(); await page @@ -58,11 +59,7 @@ export async function applyTextFilter(page: Page, columnId: string, operator: st } export async function applyNumberFilter(page: Page, columnId: string, operator: string, operand: number) { - const existingFilter = page.getByTestId(`filter-popover-trigger-${columnId}`); - if (!(await existingFilter.isVisible())) { - await addFilter(page, columnId); - } - await openFilter(page, columnId); + await addOrOpenFilter(page, columnId); await page.getByTestId(`number-filter-options-select-${columnId}`).click(); await page diff --git a/apps/web/playwright/insights-routing-filters.e2e.ts b/apps/web/playwright/insights-routing-filters.e2e.ts index b93c100af8..66611b8071 100644 --- a/apps/web/playwright/insights-routing-filters.e2e.ts +++ b/apps/web/playwright/insights-routing-filters.e2e.ts @@ -288,7 +288,6 @@ test.describe("Insights > Routing Filters", () => { await page.goto(`/insights/routing`); await addFilter(page, "bookingAttendees"); - await openFilter(page, "bookingAttendees"); await page.getByPlaceholder("Filter attendees by name or email").fill("John"); await page.keyboard.press("Enter"); @@ -297,7 +296,6 @@ test.describe("Insights > Routing Filters", () => { await clearFilters(page); await addFilter(page, "bookingAttendees"); - await openFilter(page, "bookingAttendees"); await page.getByPlaceholder("Filter attendees by name or email").fill("jane.smith@example"); await page.keyboard.press("Enter"); @@ -306,7 +304,6 @@ test.describe("Insights > Routing Filters", () => { await clearFilters(page); await addFilter(page, "bookingAttendees"); - await openFilter(page, "bookingAttendees"); await page.getByPlaceholder("Filter attendees by name or email").fill("JANE"); await page.keyboard.press("Enter"); diff --git a/apps/web/playwright/out-of-office.e2e.ts b/apps/web/playwright/out-of-office.e2e.ts index 2447195667..83f4145b55 100644 --- a/apps/web/playwright/out-of-office.e2e.ts +++ b/apps/web/playwright/out-of-office.e2e.ts @@ -7,7 +7,7 @@ import { randomString } from "@calcom/lib/random"; import prisma from "@calcom/prisma"; import { MembershipRole } from "@calcom/prisma/enums"; -import { addFilter, openFilter } from "./filter-helpers"; +import { addFilter } from "./filter-helpers"; import { test } from "./lib/fixtures"; import { localize } from "./lib/localize"; import { submitAndWaitForResponse } from "./lib/testUtils"; @@ -673,7 +673,6 @@ test.describe("Out of office", () => { (response) => response.url().includes("outOfOfficeEntriesList") && response.status() === 200 ); await addFilter(page, "dateRange"); - await openFilter(page, "dateRange"); await expect(page.locator('[data-testid="date-range-options-tdy"]')).toBeVisible(); //Today await expect(page.locator('[data-testid="date-range-options-w"]')).toBeVisible(); //Last 7 Days @@ -843,7 +842,6 @@ test.describe("Out of office", () => { ); await entriesListRespPromise1; - await openFilter(page, "dateRange"); const entriesListRespPromise2 = page.waitForResponse( (response) => response.url().includes("outOfOfficeEntriesList") && response.status() === 200 ); diff --git a/packages/features/data-table/components/filters/AddFilterButton.tsx b/packages/features/data-table/components/filters/AddFilterButton.tsx index e39fcccbba..71c182f15f 100644 --- a/packages/features/data-table/components/filters/AddFilterButton.tsx +++ b/packages/features/data-table/components/filters/AddFilterButton.tsx @@ -31,7 +31,7 @@ function AddFilterButtonComponent( ref: React.Ref ) { const { t } = useLocale(); - const { activeFilters, addFilter } = useDataTable(); + const { activeFilters, addFilter, filterToOpen } = useDataTable(); const [open, setOpen] = useState(false); const filterableColumns = useFilterableColumns(table); @@ -90,6 +90,7 @@ function AddFilterButtonComponent( { + if (filterToOpen) filterToOpen.current = column.id; addFilter(column.id); setOpen(false); }} diff --git a/packages/features/data-table/components/filters/useFilterPopoverOpen.ts b/packages/features/data-table/components/filters/useFilterPopoverOpen.ts index b7983547eb..10de3ab621 100644 --- a/packages/features/data-table/components/filters/useFilterPopoverOpen.ts +++ b/packages/features/data-table/components/filters/useFilterPopoverOpen.ts @@ -7,11 +7,15 @@ export function useFilterPopoverOpen(columnId: string) { const [open, setOpen] = useState(false); useEffect(() => { - let timeoutId: NodeJS.Timeout | undefined; + let timeoutId: ReturnType | undefined; if (filterToOpen.current === columnId) { timeoutId = setTimeout(() => { setOpen(true); + // Reset only if we still own the marker to avoid clobbering a newer selection. + if (filterToOpen.current === columnId) { + filterToOpen.current = undefined; + } }, 0); }