fixing combobox menu flipping with picker code (#2069)

Co-authored-by: Danni <[email protected]>

Author: LFDanLu

packages/@react-spectrum/combobox/src/ComboBox.tsx

@@ -108,7 +108,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
     state
   );
 
-  let {overlayProps, placement} = useOverlayPosition({
+  let {overlayProps, placement, updatePosition} = useOverlayPosition({
     targetRef: unwrappedButtonRef,
     overlayRef: unwrappedPopoverRef,
     scrollRef: listBoxRef,
@@ -137,6 +137,17 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
 
   useLayoutEffect(onResize, [scale, onResize]);
 
+  // Update position once the ListBox has rendered. This ensures that
+  // it flips properly when it doesn't fit in the available space.
+  // TODO: add ResizeObserver to useOverlayPosition so we don't need this.
+  useLayoutEffect(() => {
+    if (state.isOpen) {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    }
+  }, [state.isOpen, updatePosition]);
+
   let style = {
     ...overlayProps.style,
     width: isQuiet ? null : menuWidth,