From e5f96f97acb6c5bfcb57c0debd4607953c6a6d35 Mon Sep 17 00:00:00 2001
From: Dennis Smolek <desopolis@gmail.com>
Date: Tue, 1 Oct 2024 12:38:01 +0900
Subject: [PATCH] fix: add orientation handling (#3365)

---
 packages/fiber/src/web/use-measure.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/fiber/src/web/use-measure.ts b/packages/fiber/src/web/use-measure.ts
index 84e01815ef..8588d2f688 100644
--- a/packages/fiber/src/web/use-measure.ts
+++ b/packages/fiber/src/web/use-measure.ts
@@ -32,6 +32,7 @@ type State = {
   scrollContainers: HTMLOrSVGElement[] | null
   resizeObserver: ResizeObserver | null
   lastBounds: RectReadOnly
+  orientationHandler: null | (() => void)
 }
 
 export type Options = {
@@ -67,7 +68,13 @@ export function useMeasure(
   }
 
   // keep all state in a ref
-  const state = useRef<State>({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: bounds })
+  const state = useRef<State>({
+    element: null,
+    scrollContainers: null,
+    resizeObserver: null,
+    lastBounds: bounds,
+    orientationHandler: null,
+  })
 
   // set actual debounce values early, so effects know if they should react accordingly
   const scrollDebounce = debounce ? (typeof debounce === 'number' ? debounce : debounce.scroll) : null
@@ -124,6 +131,9 @@ export function useMeasure(
       state.current.resizeObserver.disconnect()
       state.current.resizeObserver = null
     }
+    if (state.current.orientationHandler) {
+      screen.orientation.removeEventListener('orientationchange', state.current.orientationHandler)
+    }
   }
 
   // add scroll-listeners / observers
@@ -136,6 +146,9 @@ export function useMeasure(
         scrollContainer.addEventListener('scroll', scrollChange, { capture: true, passive: true }),
       )
     }
+    state.current.orientationHandler = () => {
+      scrollChange()
+    }
   }
 
   // the ref we expose to the user