Merged in fix/SW-2651-scroll-multiroom (pull request #2174)

fix(SW-2651): now scrolling after choosing the last room

* fix(SW-2651): now scrolling after choosing the last room


Approved-by: Bianca Widstam

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx

@@ -8,6 +8,7 @@ import { useRatesStore } from "@/stores/select-rate"
 import Button from "@/components/TempDesignSystem/Button"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
+import useStickyPosition from "@/hooks/useStickyPosition"
 
 import SelectedRoomPanel from "./SelectedRoomPanel"
 import { roomSelectionPanelVariants } from "./variants"
@@ -27,6 +28,7 @@ export default function MultiRoomWrapper({
     roomNr,
     selectedRate,
   } = useRoomContext()
+  const { getTopOffset } = useStickyPosition()
 
   const roomMsg = intl.formatMessage(
     {
@@ -61,21 +63,29 @@ export default function MultiRoomWrapper({
 
   useEffect(() => {
     requestAnimationFrame(() => {
-      const SCROLL_OFFSET = 100
+      const SCROLL_OFFSET = 12 + getTopOffset()
       const roomElements = document.querySelectorAll(`.${styles.roomContainer}`)
 
-      const selectedRoom = roomElements[activeRoom]
+      // If no room is active we will show all rooms collapsed, hence we want
+      // to scroll to the first room.
+      const selectedRoom =
+        activeRoom === -1 ? roomElements[0] : roomElements[activeRoom]
 
       if (selectedRoom) {
         const elementPosition = selectedRoom.getBoundingClientRect().top
         const offsetPosition = elementPosition + window.scrollY - SCROLL_OFFSET
 
-        window.scrollTo({
-          top: offsetPosition,
-          behavior: "smooth",
-        })
+        // Setting a tiny delay for the scrolling. Without it the browser sometimes doesn't scroll up
+        // after modifying the first room.
+        setTimeout(() => {
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: "smooth",
+          })
+        }, 5)
       }
     })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeRoom])
 
   if (isMultiRoom) {