fix: popovers in ComboBox and Select

.changeset/swift-colts-sing.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix position of ComboBox and Select popovers.

src/components/fields/ComboBox/ComboBox.tsx

@@ -36,6 +36,7 @@ import {
   Styles,
   tasty,
 } from '../../../tasty';
+import { chainRaf } from '../../../utils/raf';
 import { generateRandomId } from '../../../utils/random';
 import {
   mergeProps,
@@ -867,17 +868,16 @@ function ComboBoxOverlay({
     popoverRef as any,
   );
 
-  // Update position when overlay opens
+  // Update position when overlay opens or content changes
   useLayoutEffect(() => {
-    if (isOpen) {
-      // Use double RAF to ensure layout is complete before positioning
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          updatePosition?.();
-        });
-      });
+    if (isOpen && updatePosition) {
+      // Use triple RAF to ensure layout is complete before positioning
+      // This gives enough time for the DisplayTransition and content to render
+      return chainRaf(() => {
+        updatePosition();
+      }, 3);
     }
-  }, [isOpen, updatePosition]);
+  }, [isOpen]);
 
   // Extract primary placement direction for consistent styling
   const placementDirection = placement?.split(' ')[0] || direction;

src/components/fields/Select/Select.tsx

@@ -42,6 +42,7 @@ import {
   Styles,
   tasty,
 } from '../../../tasty/index';
+import { chainRaf } from '../../../utils/raf';
 import { generateRandomId } from '../../../utils/random';
 import {
   forwardRefWithGenerics,
@@ -525,15 +526,14 @@ export function ListBoxPopup({
 
   // Update position when overlay opens
   useLayoutEffect(() => {
-    if (state.isOpen) {
-      // Use double RAF to ensure layout is complete before positioning
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          updatePosition?.();
-        });
-      });
+    if (state.isOpen && updatePosition) {
+      // Use triple RAF to ensure layout is complete before positioning
+      // This gives enough time for the DisplayTransition and content to render
+      return chainRaf(() => {
+        updatePosition();
+      }, 3);
     }
-  }, [state.isOpen, updatePosition]);
+  }, [state.isOpen]);
 
   // Get props for the listbox
   let { listBoxProps } = useListBox(

src/utils/raf.ts

@@ -0,0 +1,42 @@
+/**
+ * Chains N requestAnimationFrame calls and returns a cancel function.
+ * Useful for ensuring layout is complete before performing operations.
+ *
+ * @param callback - The function to call after N frames
+ * @param count - Number of RAF cycles to wait (default: 1)
+ * @returns A function to cancel the pending RAF call
+ *
+ * @example
+ * const cancel = chainRaf(() => {
+ *   updatePosition();
+ * }, 3);
+ *
+ * // Later, if needed:
+ * cancel();
+ */
+export function chainRaf(callback: () => void, count: number = 1): () => void {
+  let rafId: number | null = null;
+  let cancelled = false;
+
+  const scheduleNext = (remaining: number) => {
+    if (cancelled) return;
+
+    if (remaining <= 0) {
+      callback();
+      return;
+    }
+
+    rafId = requestAnimationFrame(() => {
+      scheduleNext(remaining - 1);
+    });
+  };
+
+  scheduleNext(count);
+
+  return () => {
+    cancelled = true;
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+    }
+  };
+}