Ensure 2 renders for submenu portal container (#5828)

Author: snowystinger

packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx

@@ -43,7 +43,7 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
 
   let triggerRef = useRef<HTMLLIElement>(null);
   let popoverRef = useRef(null);
-  let {popoverContainerRef, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();
+  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();
   let triggerNode = state.collection.getItem(targetKey);
   let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});
   let submenuRef = unwrapDOMRef(popoverRef);
@@ -145,7 +145,7 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
         UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
         onDismissButtonPress={onDismissButtonPress}
         onBlurWithin={onBlurWithin}
-        container={popoverContainerRef.current}
+        container={popoverContainer}
         state={submenuTriggerState}
         ref={popoverRef}
         triggerRef={triggerRef}

packages/@react-spectrum/menu/src/Menu.tsx

@@ -40,26 +40,28 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
     ...mergeProps(contextProps, props)
   };
   let domRef = useDOMRef(ref);
-  let popoverContainerRef = useRef(null);
+  let [popoverContainer, setPopoverContainer] = useState(null);
   let trayContainerRef = useRef(null);
   let state = useTreeState(completeProps);
   let submenuRef = useRef<HTMLDivElement>(null);
   let {menuProps} = useMenu(completeProps, state, domRef);
   let {styleProps} = useStyleProps(completeProps);
   useSyncRef(contextProps, domRef);
   let [leftOffset, setLeftOffset] = useState({left: 0});
+  let prevPopoverContainer = useRef(null);
   useEffect(() => {
-    if (popoverContainerRef.current) {
-      let {left} = popoverContainerRef.current.getBoundingClientRect();
+    if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
+      prevPopoverContainer.current = popoverContainer;
+      let {left} = popoverContainer.getBoundingClientRect();
       setLeftOffset({left: -1 * left});
     }
-  }, []);
+  }, [leftOffset, popoverContainer]);
 
   let menuLevel = contextProps.submenuLevel ?? -1;
   let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack[menuLevel + 1]) != null;
   // TODO: add slide transition
   return (
-    <MenuStateContext.Provider value={{popoverContainerRef, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>
+    <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>
       <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />
       <FocusScope>
         <TrayHeaderWrapper
@@ -106,7 +108,7 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
             })}
           </div>
         </TrayHeaderWrapper>
-        {rootMenuTriggerState?.isOpen && <div ref={popoverContainerRef} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }
+        {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }
       </FocusScope>
     </MenuStateContext.Provider>
   );

packages/@react-spectrum/menu/src/SubmenuTrigger.tsx

@@ -24,7 +24,7 @@ import {useLocale} from '@react-aria/i18n';
 
 interface SubmenuTriggerProps {
   /**
-   * The contents of the SubmenuTrigger - a Item and a Menu.
+   * The contents of the SubmenuTrigger - an Item and a Menu.
    */
   children: ReactElement[],
   targetKey: Key
@@ -40,7 +40,7 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
   } = props;
 
   let [menuTrigger, menu] = React.Children.toArray(children);
-  let {popoverContainerRef, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState, state} = useMenuStateContext();
+  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState, state} = useMenuStateContext();
   let triggerNode = state.collection.getItem(targetKey);
   let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);
   let {submenuTriggerProps, submenuProps, popoverProps} = UNSTABLE_useSubmenuTrigger({
@@ -101,7 +101,7 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
         {...popoverProps}
         onDismissButtonPress={onDismissButtonPress}
         UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
-        container={popoverContainerRef.current}
+        container={popoverContainer}
         containerPadding={0}
         crossOffset={offset}
         offset={offset}

packages/@react-spectrum/menu/src/context.ts

@@ -49,7 +49,7 @@ export function useSubmenuTriggerContext(): SubmenuTriggerContextValue {
 
 export interface MenuStateContextValue<T> {
   state?: TreeState<T>,
-  popoverContainerRef?: RefObject<HTMLElement>,
+  popoverContainer?: HTMLElement,
   trayContainerRef?: RefObject<HTMLElement>,
   menu?: RefObject<HTMLDivElement>,
   submenu?: RefObject<HTMLDivElement>,

packages/react-aria-components/src/Menu.tsx

@@ -31,7 +31,7 @@ import {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
 export const MenuStateContext = createContext<TreeState<unknown> | null>(null);
 export const RootMenuTriggerStateContext = createContext<RootMenuTriggerState | null>(null);
-export const SubmenuContext = createContext<{popoverContainerRef: RefObject<Element>} | null>(null);
+export const SubmenuContext = createContext<{popoverContainer: Element | null} | null>(null);
 
 export interface MenuTriggerProps extends BaseMenuTriggerProps {
   children?: ReactNode
@@ -146,7 +146,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
     collection,
     children: undefined
   });
-  let popoverContainerRef = useRef<HTMLDivElement>(null);
+  let [popoverContainer, setPopoverContainer] = useState<HTMLDivElement | null>(null);
   let {menuProps} = useMenu(props, state, ref);
 
   let children = useCachedChildren({
@@ -181,12 +181,12 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
           values={[
             [MenuStateContext, state],
             [SeparatorContext, {elementType: 'div'}],
-            [SubmenuContext, {popoverContainerRef}]
+            [SubmenuContext, {popoverContainer}]
           ]}>
           {children}
         </Provider>
       </div>
-      <div ref={popoverContainerRef} style={{width: '100vw', position: 'absolute', top: 0}} />
+      <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: 0}} />
     </FocusScope>
   );
 }
@@ -398,7 +398,7 @@ function MenuItemTriggerInner<T>({item, popover, parentMenuRef, delay}: MenuItem
           trigger: 'SubmenuTrigger',
           triggerRef: ref,
           placement: 'end top',
-          UNSTABLE_portalContainer: submenuContext.popoverContainerRef.current || undefined,
+          UNSTABLE_portalContainer: submenuContext.popoverContainer || undefined,
           ...popoverProps
         }]
       ]}>