From 0815ab715b7933307131637a30689ba52a1f5efc Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Fri, 24 Feb 2023 05:49:23 +0530
Subject: [PATCH] fix: slot picker scroll position not consistent (#7282)

* fix: remove old scroll to method

* feat: add scroll into view
---
 apps/web/components/booking/AvailableTimes.tsx | 14 ++++++++++++--
 packages/features/calendars/DatePicker.tsx     | 10 ----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
index f35edf29be..7c98534fe7 100644
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ b/apps/web/components/booking/AvailableTimes.tsx
@@ -2,11 +2,12 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import type { FC } from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";
 import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
@@ -50,6 +51,15 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   useEffect(() => {
     setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim());
   }, []);
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const ref = useCallback(
+    (node: HTMLDivElement) => {
+      if (isMobile) {
+        node?.scrollIntoView({ behavior: "smooth" });
+      }
+    },
+    [isMobile]
+  );
 
   return (
     <div ref={slotPickerRef}>
@@ -75,7 +85,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               />
             </div>
           </div>
-          <div className="flex-grow overflow-y-auto sm:block md:h-[364px]">
+          <div ref={ref} className="flex-grow overflow-y-auto sm:block md:h-[364px]">
             {slots.length > 0 &&
               slots.map((slot) => {
                 type BookingURL = {
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 970ed7b04a..28563fc3a5 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -6,7 +6,6 @@ import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
 import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { weekdayNames } from "@calcom/lib/weekday";
 import { Button, SkeletonText } from "@calcom/ui";
 import { FiArrowRight } from "@calcom/ui/components/icon";
@@ -139,8 +138,6 @@ const Days = ({
     days.push(date);
   }
 
-  const isMobile = useMediaQuery("(max-width: 768px)");
-
   return (
     <>
       {days.map((day, idx) => (
@@ -159,13 +156,6 @@ const Days = ({
               date={day}
               onClick={() => {
                 props.onChange(day);
-                isMobile &&
-                  setTimeout(() => {
-                    window.scrollTo({
-                      top: 360,
-                      behavior: "smooth",
-                    });
-                  }, 500);
               }}
               disabled={
                 (includedDates && !includedDates.includes(yyyymmdd(day))) ||