feat: Allow disabling auto-scroll using ui.disable-auto-scroll (#23462)

packages/embeds/embed-core/src/embed-iframe.ts

@@ -579,10 +579,13 @@ function main() {
   const url = new URL(document.URL);
   embedStore.theme = window?.getEmbedTheme?.();
 
+  const autoScrollFromParam = url.searchParams.get("ui.autoscroll");
+  const shouldDisableAutoScroll = autoScrollFromParam === "false";
   embedStore.uiConfig = {
     // TODO: Add theme as well here
     colorScheme: url.searchParams.get("ui.color-scheme"),
     layout: url.searchParams.get("layout") as BookerLayouts,
+    disableAutoScroll: shouldDisableAutoScroll,
   };
 
   actOnColorScheme(embedStore.uiConfig.colorScheme);

packages/embeds/embed-core/src/lib/utils.ts

@@ -79,6 +79,7 @@ function listKnownConfigProps() {
     "ui.color-scheme",
     "theme",
     "cal.embed.pageType",
+    "ui.autoscroll",
   ];
   return knownConfigProps;
 }

packages/embeds/embed-core/src/types.ts

@@ -32,6 +32,7 @@ export type UiConfig = {
   cssVarsPerTheme?: Record<Theme, Record<string, string>>;
   layout?: BookerLayouts;
   colorScheme?: string | null;
+  disableAutoScroll?: boolean;
 };
 
 declare global {
@@ -63,6 +64,7 @@ export type KnownConfig = {
   layout?: BookerLayouts;
   // TODO: Rename layout and theme as ui.layout and ui.theme as it makes it clear that these two can be configured using `ui` instruction as well any time.
   "ui.color-scheme"?: string;
+  "ui.autoscroll"?: "true" | "false";
   theme?: EmbedThemeConfig;
   // Prefixing with cal.embed because there could be more query params that aren't required by embed and are used for things like prefilling booking form, configuring dry run, and some other params simply to be forwarded to the booking success redirect URL.
   // There are some cal. prefixed query params as well, not meant for embed specifically, but in general for cal.com

packages/features/bookings/Booker/Booker.tsx

@@ -8,6 +8,7 @@ import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import { useIsPlatformBookerEmbed } from "@calcom/atoms/hooks/useIsPlatformBookerEmbed";
 import dayjs from "@calcom/dayjs";
 import PoweredBy from "@calcom/ee/components/PoweredBy";
+import { useEmbedUiConfig } from "@calcom/embed-core/embed-iframe";
 import { updateEmbedBookerState } from "@calcom/embed-core/src/embed-iframe";
 import TurnstileCaptcha from "@calcom/features/auth/Turnstile";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
@@ -165,9 +166,14 @@ const BookerComponent = ({
   } = calendars;
 
   const scrolledToTimeslotsOnce = useRef(false);
-
+  const embedUiConfig = useEmbedUiConfig();
   const scrollToTimeSlots = () => {
-    if (isMobile && !scrolledToTimeslotsOnce.current && timeslotsRef.current) {
+    if (
+      isMobile &&
+      !scrolledToTimeslotsOnce.current &&
+      timeslotsRef.current &&
+      !embedUiConfig.disableAutoScroll
+    ) {
       // eslint-disable-next-line @calcom/eslint/no-scroll-into-view-embed -- We are allowing it here because scrollToTimeSlots is called on explicit user action where it makes sense to scroll, remember that the goal is to not do auto-scroll on embed load because that ends up scrolling the embedding webpage too
       scrollIntoViewSmooth(timeslotsRef.current, isEmbed);
       scrolledToTimeslotsOnce.current = true;