From 0f332cc35ece1672aa86f005c90079082ef46125 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 4 Jul 2023 11:44:13 +0100
Subject: [PATCH] fix: Auto scroll on selection of date selection (#9907)

---
 .../bookings/Booker/components/AvailableTimeSlots.tsx  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
index 3325692acf..5c22097300 100644
--- a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
+++ b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useRef, useEffect } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/bookings";
@@ -26,6 +26,7 @@ export const AvailableTimeSlots = ({ extraDays, limitHeight, seatsPerTimeslot }:
   const setSelectedTimeslot = useBookerStore((state) => state.setSelectedTimeslot);
   const event = useEvent();
   const date = selectedDate || dayjs().format("YYYY-MM-DD");
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const onTimeSelect = (time: string) => {
     setSelectedTimeslot(time);
@@ -58,8 +59,15 @@ export const AvailableTimeSlots = ({ extraDays, limitHeight, seatsPerTimeslot }:
   const isMultipleDates = dates.length > 1;
   const slotsPerDay = useSlotsForMultipleDates(dates, schedule?.data?.slots);
 
+  useEffect(() => {
+    if (containerRef.current && !schedule.isLoading) {
+      containerRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [containerRef, schedule.isLoading]);
+
   return (
     <div
+      ref={containerRef}
       className={classNames(
         limitHeight && "flex-grow md:h-[400px]",
         !limitHeight && "flex h-full w-full flex-row gap-4"