From 3d121be74ad329eef5f189f9f47a48356935e3b8 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 14 Nov 2025 09:51:29 +0000
Subject: [PATCH] Merged in feat/book-570-select-rate-scroll (pull request
 #3160)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat(BOOK-570): fix scroll issue when selecting a rate for the first time

* feat(BOOK-570): fix scroll issue when selecting a rate for the first time


Approved-by: Joakim Jäderberg
---
 .../RateSummary/MobileSummary/index.tsx       |  8 ++-
 .../Rooms/RoomsList/ScrollToList.tsx          | 54 -------------------
 .../RoomsContainer/Rooms/RoomsList/index.tsx  |  2 -
 .../SelectRate/SelectRateContext/index.tsx    |  1 -
 4 files changed, 7 insertions(+), 58 deletions(-)
 delete mode 100644 packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx

diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
index 05a05973b..15962dd25 100644
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
@@ -19,7 +19,9 @@ import styles from "./mobileSummary.module.css"
 export function MobileSummary() {
   const intl = useIntl()
   const scrollY = useRef(0)
-  const [isSummaryOpen, setIsSummaryOpen] = useState(false)
+  const [isSummaryOpen, setIsSummaryOpen] = useState<boolean | undefined>(
+    undefined
+  )
   const isUserLoggedIn = useIsLoggedIn()
 
   const { selectedRates } = useSelectRateContext()
@@ -29,6 +31,10 @@ export function MobileSummary() {
   }
 
   useEffect(() => {
+    if (isSummaryOpen === undefined) {
+      return
+    }
+
     if (isSummaryOpen) {
       scrollY.current = window.scrollY
       document.body.style.position = "fixed"
diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx
deleted file mode 100644
index a56723287..000000000
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client"
-import { useEffect } from "react"
-
-import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
-
-import styles from "./rooms.module.css"
-
-export default function ScrollToList() {
-  const {
-    input: { isMultiRoom },
-    selectedRates,
-  } = useSelectRateContext()
-  const selectedRateCode = selectedRates.rates[0]
-    ? `${selectedRates.rates[0].rateDefinition.rateCode}${selectedRates.rates[0].roomInfo.roomTypeCode}`
-    : null
-
-  useEffect(() => {
-    if (isMultiRoom) {
-      return
-    }
-
-    if (!selectedRateCode) {
-      return
-    }
-
-    // Required to prevent the history.pushState on the first selection
-    // to scroll user back to top
-    requestAnimationFrame(() => {
-      const SCROLL_OFFSET = 173 // summary on mobile is 163px
-
-      const checkedRadio = document.querySelector(
-        `.${styles.roomList} input[type="radio"]:checked`
-      )
-
-      const selectedRateCard = checkedRadio?.closest("label") ?? null
-
-      if (selectedRateCard) {
-        const elementPosition = selectedRateCard.getBoundingClientRect().top
-        const windowHeight = window.innerHeight
-        const offsetPosition =
-          elementPosition +
-          window.scrollY -
-          (windowHeight - selectedRateCard.offsetHeight - SCROLL_OFFSET)
-
-        window.scrollTo({
-          top: offsetPosition,
-          behavior: "instant",
-        })
-      }
-    })
-  }, [isMultiRoom, selectedRateCode])
-
-  return null
-}
diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx
index 89fc72904..cb6b4e8f4 100644
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx
@@ -3,7 +3,6 @@
 import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
 import { RoomListItem } from "./RoomListItem"
 import { RoomsListSkeleton } from "./RoomsListSkeleton"
-import ScrollToList from "./ScrollToList"
 
 import styles from "./rooms.module.css"
 
@@ -22,7 +21,6 @@ export default function RoomsList({ roomIndex }: { roomIndex: number }) {
 
   return (
     <>
-      <ScrollToList />
       <ul className={styles.roomList}>
         {getAvailabilityForRoom(roomIndex)?.map((room, ix) => {
           return (
diff --git a/packages/booking-flow/lib/contexts/SelectRate/SelectRateContext/index.tsx b/packages/booking-flow/lib/contexts/SelectRate/SelectRateContext/index.tsx
index 8c3baacf2..d467d461a 100644
--- a/packages/booking-flow/lib/contexts/SelectRate/SelectRateContext/index.tsx
+++ b/packages/booking-flow/lib/contexts/SelectRate/SelectRateContext/index.tsx
@@ -565,7 +565,6 @@ function useUpdateBooking() {
     newUrl.search = serializeBookingSearchParams(booking).toString()
     newUrl.searchParams.set(BookingCodeFilterQueryName, bookingCodeFilter)
 
-    // router.replace(newUrl.toString(), { scroll: false })
     window.history.replaceState({}, "", newUrl.toString())
   }
 }