[PLA-11322] Aria Combobox popover should not flip by default

Change-Id: Iac08a209bac9bbfb91bc34ea8930d0bc6def928a GitOrigin-RevId: c2c04319232edcc42df74af85c3613654759827b
plasmicapp · Oct 23, 2024 · 3cc72b6 · 3cc72b6
1 parent eb1e687
commit 3cc72b6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/plasmicpkgs/react-aria/src/registerComboBox.tsx b/plasmicpkgs/react-aria/src/registerComboBox.tsx
@@ -48,7 +48,9 @@ export function BaseComboBox(props: BaseComboboxProps) {
 
   return (
     <ComboBox {...rest}>
-      <PlasmicPopoverContext.Provider value={{ isOpen }}>
+      <PlasmicPopoverContext.Provider
+        value={{ isOpen, defaultShouldFlip: false }}
+      >
         <PlasmicListBoxContext.Provider
           value={{
             idManager,

diff --git a/plasmicpkgs/react-aria/src/registerPopover.tsx b/plasmicpkgs/react-aria/src/registerPopover.tsx
@@ -1,7 +1,7 @@
 import { PlasmicElement, usePlasmicCanvasContext } from "@plasmicapp/host";
 import { mergeProps } from "@react-aria/utils";
 import React from "react";
-import { Popover, PopoverContext, SelectContext } from "react-aria-components";
+import { Popover, PopoverContext } from "react-aria-components";
 import { PlasmicPopoverContext } from "./contexts";
 import {
   CodeComponentMetaOverrides,
@@ -20,22 +20,21 @@ export interface BasePopoverProps
     HasControlContextData<PopoverControlContextData> {
   className?: string;
   resetClassName?: string;
+  defaultShouldFlip?: boolean;
 }
 
 export function BasePopover(props: BasePopoverProps) {
   const { resetClassName, setControlContextData, ...restProps } = props;
   const isStandalone = !React.useContext(PopoverContext);
   const context = React.useContext(PlasmicPopoverContext);
-  const isInsideSelect = !!React.useContext(SelectContext);
   const triggerRef = React.useRef<any>(null);
   const isEditMode = !!usePlasmicCanvasContext();
 
-  // Select/Combobox popovers should not flip by default
-  const defaultShouldFlip = isInsideSelect ? false : true;
-
   const mergedProps = mergeProps(
-    { shouldFlip: defaultShouldFlip },
-    context,
+    {
+      isOpen: context?.isOpen,
+      shouldFlip: context?.defaultShouldFlip,
+    },
     /**
      * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *
      *
@@ -55,7 +54,7 @@ export function BasePopover(props: BasePopoverProps) {
   );
 
   setControlContextData?.({
-    defaultShouldFlip,
+    defaultShouldFlip: context?.defaultShouldFlip ?? true,
   });
 
   return (
@@ -145,7 +144,7 @@ export function registerPopover(
           type: "boolean",
           description:
             "Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.",
-          defaultValueHint: (_props, ctx) => ctx?.defaultShouldFlip ?? true,
+          defaultValueHint: (_props, ctx) => ctx?.defaultShouldFlip,
         },
         placement: {
           type: "choice",

diff --git a/plasmicpkgs/react-aria/src/registerSelect.tsx b/plasmicpkgs/react-aria/src/registerSelect.tsx
@@ -102,7 +102,9 @@ export function BaseSelect(props: BaseSelectProps) {
       isOpen={openProp}
       {...extractPlasmicDataProps(props)}
     >
-      <PlasmicPopoverContext.Provider value={{ isOpen: openProp }}>
+      <PlasmicPopoverContext.Provider
+        value={{ isOpen: openProp, defaultShouldFlip: false }}
+      >
         <PlasmicListBoxContext.Provider
           value={{
             idManager,