@telus-uds/components-base 3.30.0 → 3.32.0

package/src/utils/useOverlaidPosition.js

@@ -54,11 +54,6 @@ function getOverlaidPosition({
   offsets = {},
   align
 }) {
-  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
-  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
-  // that can be passed to the appropriate ScrollView?
-  const { scrollX = 0, scrollY = 0 } = typeof window === 'object' ? window : {}
-
   // Will have top, bottom, left and/or right offsets depending on `align`
   const positioning = {}
 
@@ -68,40 +63,44 @@ function getOverlaidPosition({
   if (align.top)
     positioning.top = getPosition({
       edge: getEdgeType(align, 'top'),
-      fromEdge: sourceLayout.y + scrollY + verticalOffset,
+      fromEdge: sourceLayout.y + verticalOffset,
       sourceSize: sourceLayout.height
     })
   if (align.middle)
     positioning.top = getPosition({
       edge: getEdgeType(align, 'middle'),
-      fromEdge: sourceLayout.y + scrollY + verticalOffset - targetDimensions.height / 2,
-      sourceSize: sourceLayout.height
-    })
-  if (align.bottom)
-    positioning.bottom = getPosition({
-      edge: getEdgeType(align, 'bottom'),
-      fromEdge:
-        windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - verticalOffset),
+      fromEdge: sourceLayout.y + verticalOffset - targetDimensions.height / 2,
       sourceSize: sourceLayout.height
     })
+  if (align.bottom) {
+    if (Platform.OS !== 'web') {
+      // On native, position:absolute is parent-relative, so use negative top offset instead of window-based bottom math.
+      positioning.top = sourceLayout.y - targetDimensions.height - verticalOffset
+    } else {
+      positioning.bottom = getPosition({
+        edge: getEdgeType(align, 'bottom'),
+        fromEdge: windowDimensions.height - (sourceLayout.y + sourceLayout.height - verticalOffset),
+        sourceSize: sourceLayout.height
+      })
+    }
+  }
 
   if (align.left)
     positioning.left = getPosition({
       edge: getEdgeType(align, 'left'),
-      fromEdge: sourceLayout.x + scrollX + horizontalOffset,
+      fromEdge: sourceLayout.x + horizontalOffset,
       sourceSize: sourceLayout.width
     })
   if (align.center)
     positioning.left = getPosition({
       edge: getEdgeType(align, 'center'),
-      fromEdge: sourceLayout.x + scrollX + horizontalOffset - targetDimensions.width / 2,
+      fromEdge: sourceLayout.x + horizontalOffset - targetDimensions.width / 2,
       sourceSize: sourceLayout.width
     })
   if (align.right)
     positioning.right = getPosition({
       edge: getEdgeType(align, 'right'),
-      fromEdge:
-        windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - horizontalOffset),
+      fromEdge: windowDimensions.width - (sourceLayout.x + sourceLayout.width - horizontalOffset),
       sourceSize: sourceLayout.width
     })
 
@@ -149,6 +148,34 @@ const useOverlaidPosition = ({
 
   const [windowDimensions, setWindowDimensions] = useState(null)
 
+  const hasRemeasuredRef = useRef(false)
+
+  const applySourceLayout = useCallback((dims, x, y, width, height) => {
+    setWindowDimensions(dims)
+    setSourceLayout({ x, y, width, height })
+  }, [])
+
+  const measureSourceOnWeb = useCallback(
+    (windowDims) => {
+      const el = sourceRef.current
+      if (!el) return
+      const domNode = el._nativeTag ?? el
+      const dims = windowDims ?? Dimensions.get('window')
+      const rect =
+        typeof domNode.getBoundingClientRect === 'function' ? domNode.getBoundingClientRect() : null
+      if (rect) {
+        const x = rect.left + (typeof window.scrollX === 'number' ? window.scrollX : 0)
+        const y = rect.top + (typeof window.scrollY === 'number' ? window.scrollY : 0)
+        applySourceLayout(dims, x, y, rect.width, rect.height)
+      } else {
+        el.measureInWindow((mx, my, width, height) => {
+          applySourceLayout(dims, mx, my, width, height)
+        })
+      }
+    },
+    [applySourceLayout]
+  )
+
   const onTargetLayout = useCallback(
     ({
       nativeEvent: {
@@ -173,12 +200,14 @@ const useOverlaidPosition = ({
   const readyToShow = Boolean(isShown && sourceRef.current)
   useEffect(() => {
     const handleDimensionsChange = ({ window }) => {
-      const measurementFunction = Platform.OS === 'web' ? 'measureInWindow' : 'measure'
-
-      sourceRef.current?.[measurementFunction]((x, y, width, height) => {
-        setWindowDimensions(window)
-        setSourceLayout({ x, y, width, height })
-      })
+      if (Platform.OS === 'web') {
+        measureSourceOnWeb(window)
+      } else {
+        sourceRef.current?.measure((x, y, width, height) => {
+          setWindowDimensions(window)
+          setSourceLayout({ x, y, width, height })
+        })
+      }
     }
 
     let subscription
@@ -192,6 +221,7 @@ const useOverlaidPosition = ({
       }
       setSourceLayout(null)
       setTargetDimensions(null)
+      hasRemeasuredRef.current = false
     }
 
     if (readyToShow) {
@@ -202,19 +232,29 @@ const useOverlaidPosition = ({
     }
 
     return unsubscribe
-  }, [readyToShow])
+  }, [readyToShow, measureSourceOnWeb])
+
+  // Re-measure source when targetDimensions first becomes available.
+  // Without this, there is a race condition: getBoundingClientRect() resolves faster than
+  // measureInWindow used to, so sourceLayout may be set before the dropdown has rendered
+  // and reported its dimensions via onTargetLayout. When targetDimensions finally arrives,
+  // sourceLayout is stale (no scroll has occurred to trigger handleScroll).
+  // Setting hasRemeasuredRef.current=true here also prevents the blink: isReady (on web)
+  // won't become true until this effect completes, guaranteeing the dropdown is always shown
+  // at its final correct position without an intermediate incorrect-position frame.
+  useEffect(() => {
+    if (!isShown || !sourceRef.current || !targetDimensions || Platform.OS !== 'web') return
+
+    measureSourceOnWeb()
+    hasRemeasuredRef.current = true
+  }, [targetDimensions, isShown, measureSourceOnWeb])
 
   useEffect(() => {
     if (Platform.OS !== 'web') {
       return undefined
     }
 
-    const handleScroll = debounce(() => {
-      sourceRef.current?.measureInWindow((x, y, width, height) => {
-        setWindowDimensions(window)
-        setSourceLayout({ x, y, width, height })
-      })
-    }, DEBOUNCE_DELAY)
+    const handleScroll = debounce(measureSourceOnWeb, DEBOUNCE_DELAY)
 
     window.addEventListener('scroll', handleScroll)
 
@@ -222,9 +262,19 @@ const useOverlaidPosition = ({
       window.removeEventListener('scroll', handleScroll)
       handleScroll.cancel()
     }
-  }, [sourceRef])
+  }, [measureSourceOnWeb])
 
-  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions)
+  // On web, require hasRemeasuredRef to be true before declaring isReady. This ensures
+  // the dropdown is never shown with an intermediate stale position (the blink).
+  // On native, hasRemeasuredRef stays false (the web-only effect never runs), so we skip
+  // that check to preserve the original native behaviour.
+  const isReady = Boolean(
+    isShown &&
+      sourceLayout &&
+      windowDimensions &&
+      targetDimensions &&
+      (Platform.OS !== 'web' || hasRemeasuredRef.current)
+  )
 
   const overlaidPosition = isReady
     ? getOverlaidPosition({
@@ -234,7 +284,7 @@ const useOverlaidPosition = ({
         offsets,
         align
       })
-    : {}
+    : { top: 0, left: 0 }
 
   return {
     overlaidPosition,