commonscomputer/cal.diy
5
0 Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

fix: auto-open filter dropdown after adding a new filter (#23330)

Browse Source 
* fix: auto-open-filter-dropdown

closes #23326

* coderabbit suggestion

Signed-off-by: Hemant M Mehta <hemant29mehta@gmail.com>

* coderabbit suggestion

Signed-off-by: Hemant M Mehta <hemant29mehta@gmail.com>

* removing clickable event

Signed-off-by: Hemant M Mehta <hemant29mehta@gmail.com>

* updated filters

Signed-off-by: Hemant M Mehta <hemant29mehta@gmail.com>

* fix e2e tests

---------

Signed-off-by: Hemant M Mehta <hemant29mehta@gmail.com>
Co-authored-by: Eunjae Lee <hey@eunjae.dev>
This commit is contained in:
Hemant M MehtaandEunjae Lee authored and GitHub committed 2025-08-26 13:22:43 +00:00
1 parent a22ca4758c
commit af07c411ee
6 files changed
+21 -28
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/playwright/bookings-list.e2e.ts
+1 -5
View File
@@ -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())
);
apps/web/playwright/filter-helpers.ts
+12 -15
View File
@@ -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
apps/web/playwright/insights-routing-filters.e2e.ts
-3
View File
@@ -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");
apps/web/playwright/out-of-office.e2e.ts
+1 -3
View File
@@ -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
);
packages/features/data-table/components/filters/AddFilterButton.tsx
+2 -1
View File
@@ -31,7 +31,7 @@ function AddFilterButtonComponent<TData>(
ref: React.Ref<HTMLButtonElement>
) {
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<TData>(
<CommandItem
key={column.id}
onSelect={() => {
if (filterToOpen) filterToOpen.current = column.id;
addFilter(column.id);
setOpen(false);
}}
packages/features/data-table/components/filters/useFilterPopoverOpen.ts
+5 -1
View File
@@ -7,11 +7,15 @@ export function useFilterPopoverOpen(columnId: string) {
const [open, setOpen] = useState(false);
useEffect(() => {
let timeoutId: NodeJS.Timeout | undefined;
let timeoutId: ReturnType<typeof setTimeout> | 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);
}