skip initial rendering in portaled dropdown components

reach · Apr 20, 2022 · 0c21334 · 0c21334
1 parent dd2821b
commit 0c21334
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 4 deletions.
diff --git a/packages/combobox/src/index.tsx b/packages/combobox/src/index.tsx
@@ -688,6 +688,7 @@ export const ComboboxPopover = React.forwardRef(
         data-expanded={isExpanded || undefined}
         position={position}
         targetRef={inputRef}
+        unstable_skipInitialPortalRender
         {...sharedProps}
       />
     ) : (
@@ -696,7 +697,8 @@ export const ComboboxPopover = React.forwardRef(
   }
 ) as Polymorphic.ForwardRefComponent<
   "div",
-  ComboboxPopoverProps & Partial<PopoverProps>
+  ComboboxPopoverProps &
+    Partial<Omit<PopoverProps, "unstable_skipInitialRender">>
 >;
 
 if (__DEV__) {

diff --git a/packages/dropdown/src/index.tsx b/packages/dropdown/src/index.tsx
@@ -830,6 +830,7 @@ const DropdownPopover = React.forwardRef(
         as={Comp}
         targetRef={targetRef as any}
         position={position}
+        unstable_skipInitialPortalRender
       />
     ) : (
       <Comp {...props} {...sharedProps} />

diff --git a/packages/listbox/src/index.tsx b/packages/listbox/src/index.tsx
@@ -796,6 +796,7 @@ const ListboxPopoverImpl = React.forwardRef(function ListboxPopover(
       targetRef={buttonRef as any}
       position={position}
       unstable_observableRefs={unstable_observableRefs}
+      unstable_skipInitialPortalRender
     />
   ) : (
     <Comp {...commonProps} />

diff --git a/packages/menu-button/src/index.tsx b/packages/menu-button/src/index.tsx
@@ -422,6 +422,7 @@ const MenuPopover = React.forwardRef(
         as={Comp}
         targetRef={targetRef as any}
         position={position}
+        unstable_skipInitialPortalRender
       />
     ) : (
       <Comp {...props} {...sharedProps} />
@@ -475,7 +476,7 @@ if (__DEV__) {
 function useMenuButtonContext(): MenuContextValue {
   let {
     state: { isExpanded },
-  } = useDropdownContext();
+  } = useDropdownContext("useMenuButtonContext");
   return React.useMemo(() => ({ isExpanded }), [isExpanded]);
 }
 

diff --git a/packages/popover/src/index.tsx b/packages/popover/src/index.tsx
@@ -16,9 +16,12 @@ import type * as Polymorphic from "@reach/utils/polymorphic";
 /**
  * Popover
  */
-const Popover = React.forwardRef(function Popover(props, ref) {
+const Popover = React.forwardRef(function Popover(
+  { unstable_skipInitialPortalRender, ...props },
+  ref
+) {
   return (
-    <Portal>
+    <Portal unstable_skipInitialRender={unstable_skipInitialPortalRender}>
       <PopoverImpl ref={ref} {...props} />
     </Portal>
   );
@@ -43,6 +46,7 @@ interface PopoverProps {
    * anywhere in public yet!
    */
   unstable_observableRefs?: React.RefObject<PossibleNode>[];
+  unstable_skipInitialPortalRender?: boolean;
 }
 
 if (__DEV__) {