fix (#19399)

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -5,7 +5,7 @@ import { Trans } from "next-i18next";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { FC } from "react";
-import { memo, useEffect, useState, useMemo } from "react";
+import { memo, useEffect, useState } from "react";
 import { z } from "zod";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
@@ -903,24 +903,6 @@ const InfiniteScrollMain = ({
   const { data } = useTypedQuery(querySchema);
   const orgBranding = useOrgBranding();
 
-  const tabs = useMemo(() => {
-    return (
-      eventTypeGroups?.map((item, index) => {
-        let href = item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types?noTeam";
-        // If it's the first tab and no teamId is in the URL, set href to just /event-types
-        if (index === 0 && searchParams && !searchParams.has("teamId") && !searchParams.has("noTeam")) {
-          href = "/event-types";
-        }
-        return {
-          name: item.profile.name ?? "",
-          href,
-          avatar: item.profile.image,
-          "data-testid": item.profile.name ?? "",
-        };
-      }) ?? []
-    );
-  }, [eventTypeGroups, searchParams]);
-
   if (status === "error") {
     return <Alert severity="error" title="Something went wrong" message={errorMessage} />;
   }
@@ -929,6 +911,14 @@ const InfiniteScrollMain = ({
     return <InfiniteSkeletonLoader />;
   }
 
+  const tabs = eventTypeGroups.map((item) => ({
+    name: item.profile.name ?? "",
+    href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types",
+    avatar: item.profile.image,
+    "data-testid": item.profile.name ?? "",
+    matchFullPath: true,
+  }));
+
   const activeEventTypeGroup =
     eventTypeGroups.filter((item) => item.teamId === data.teamId) ?? eventTypeGroups[0];
 

packages/lib/hooks/useUrlMatchesCurrentUrl.ts

@@ -4,7 +4,7 @@ import { usePathname } from "next/navigation";
 
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 
-export const useUrlMatchesCurrentUrl = (url: string) => {
+export const useUrlMatchesCurrentUrl = (url: string, matchFullPath?: boolean) => {
   // I don't know why usePathname ReturnType doesn't include null.
   // It can certainly have null value https://nextjs.org/docs/app/api-reference/functions/use-pathname#:~:text=usePathname%20can%20return%20null%20when%20a%20fallback%20route%20is%20being%20rendered%20or%20when%20a%20pages%20directory%20page%20has%20been%20automatically%20statically%20optimized%20by%20Next.js%20and%20the%20router%20is%20not%20ready.
   const pathname = usePathname() as null | string;
@@ -16,6 +16,9 @@ export const useUrlMatchesCurrentUrl = (url: string) => {
   } else {
     pathnameWithQuery = pathname;
   }
+  if (matchFullPath) {
+    return pathnameWithQuery ? pathnameWithQuery === url : false;
+  }
   // TODO: It should actually re-order the params before comparing ?a=1&b=2 should match with ?b=2&a=1
   return pathnameWithQuery ? pathnameWithQuery.includes(url) : false;
 };

packages/ui/components/navigation/tabs/HorizontalTabItem.tsx

@@ -20,6 +20,7 @@ export type HorizontalTabItemProps = {
   onClick?: (name: string) => void;
   isActive?: boolean;
   "data-testid"?: string;
+  matchFullPath?: boolean;
 };
 
 const HorizontalTabItem = function ({
@@ -28,9 +29,10 @@ const HorizontalTabItem = function ({
   linkShallow,
   linkScroll,
   avatar,
+  matchFullPath,
   ...props
 }: HorizontalTabItemProps) {
-  const isCurrent = useUrlMatchesCurrentUrl(href) || props?.isActive;
+  const isCurrent = useUrlMatchesCurrentUrl(href, matchFullPath) || props?.isActive;
 
   return (
     <Link