diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx index 7252a8ffc6..2f9547fbb7 100644 --- a/apps/web/components/AppListCard.tsx +++ b/apps/web/components/AppListCard.tsx @@ -60,14 +60,18 @@ export default function AppListCard(props: AppListCardProps) { const pathname = usePathname(); useEffect(() => { - if (shouldHighlight && highlight) { - const timer = setTimeout(() => { - setHighlight(false); + if (shouldHighlight && highlight && searchParams !== null && pathname !== null) { + timeoutRef.current = setTimeout(() => { const _searchParams = new URLSearchParams(searchParams); _searchParams.delete("hl"); - router.replace(`${pathname}?${_searchParams.toString()}`); + _searchParams.delete("category"); // this comes from params, not from search params + + setHighlight(false); + + const stringifiedSearchParams = _searchParams.toString(); + + router.replace(`${pathname}${stringifiedSearchParams !== "" ? `?${stringifiedSearchParams}` : ""}`); }, 3000); - timeoutRef.current = timer; } return () => { if (timeoutRef.current) { @@ -75,8 +79,7 @@ export default function AppListCard(props: AppListCardProps) { timeoutRef.current = null; } }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [highlight, pathname, router, searchParams, shouldHighlight]); return (
diff --git a/apps/web/playwright/app-list-card.e2e.ts b/apps/web/playwright/app-list-card.e2e.ts new file mode 100644 index 0000000000..780bf759af --- /dev/null +++ b/apps/web/playwright/app-list-card.e2e.ts @@ -0,0 +1,14 @@ +import { test } from "./lib/fixtures"; + +test.describe("AppListCard", async () => { + test("should remove the highlight from the URL", async ({ page, users }) => { + const user = await users.create({}); + await user.apiLogin(); + + await page.goto("/apps/installed/conferencing?hl=daily-video"); + + await page.waitForLoadState(); + + await page.waitForURL("/apps/installed/conferencing"); + }); +});