Fix two unavailable menu dialogs from being open (#4469)

Fix two unavailable menu dialogs from being open at the same time

Author: snowystinger

packages/@react-aria/menu/src/useMenuItem.ts

@@ -119,6 +119,9 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
 
   let onSubmenuOpen = useEffectEvent(() => {
     cancelOpenTimeout();
+    for (let expandedKey of state.expandedKeys) {
+      state.toggleKey(expandedKey);
+    }
     if (!state.expandedKeys.has(key)) {
       state.toggleKey(key);
     }
@@ -198,27 +201,22 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     allowsDifferentPressOrigin: true
   });
 
-  let {pressProps, isPressed} = usePress({onPressStart, onPressUp, isDisabled});
+  let {pressProps, isPressed} = usePress({onPressStart, onPressUp, isDisabled: isDisabled || (isMenuDialogTrigger && state.expandedKeys.has(key))});
   let {hoverProps} = useHover({
     isDisabled,
     onHoverStart() {
-      if (!isFocusVisible()) {
+      if (!isFocusVisible() && !(isMenuDialogTrigger && state.expandedKeys.has(key))) {
         state.selectionManager.setFocused(true);
         state.selectionManager.setFocusedKey(key);
         // focus immediately so that a focus scope opened on hover has the correct restore node
         let isFocused = key === state.selectionManager.focusedKey;
         if (isFocused && state.selectionManager.isFocused && document.activeElement !== ref.current) {
-          if (state.expandedKeys.size > 0 && !state.expandedKeys.has(key)) {
-            for (let expandedKey of state.expandedKeys) {
-              state.toggleKey(expandedKey);
-            }
-          }
           focusSafely(ref.current);
         }
       }
     },
     onHoverChange: isHovered => {
-      if (isHovered && isMenuDialogTrigger) {
+      if (isHovered && isMenuDialogTrigger && !state.expandedKeys.has(key)) {
         if (!openTimeout.current) {
           openTimeout.current = setTimeout(() => {
             onSubmenuOpen();

packages/@react-stately/tree/src/useTreeState.ts

@@ -11,7 +11,7 @@
  */
 
 import {Collection, CollectionStateBase, Expandable, MultipleSelection, Node} from '@react-types/shared';
-import {Key, useCallback, useEffect, useMemo} from 'react';
+import {Key, useCallback, useEffect, useMemo, useRef} from 'react';
 import {SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
 import {TreeCollection} from './TreeCollection';
 import {useCollection} from '@react-stately/collections';
@@ -45,6 +45,12 @@ export function useTreeState<T extends object>(props: TreeProps<T>): TreeState<T
     props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(),
     props.onExpandedChange
   );
+  let currentExpandedKeys = useRef(expandedKeys);
+  // I don't know a way to avoid this, we have to sync to the controlled state in case the prop `expandedKeys` changed.
+  // And we need to track the 'previous state' otherwise two back to back calls to `toggleKey` will only register the last call.
+  if (currentExpandedKeys.current !== expandedKeys) {
+    currentExpandedKeys.current = expandedKeys;
+  }
 
   let selectionState = useMultipleSelectionState(props);
   let disabledKeys = useMemo(() =>
@@ -62,7 +68,9 @@ export function useTreeState<T extends object>(props: TreeProps<T>): TreeState<T
   }, [tree, selectionState.focusedKey]);
 
   let onToggle = (key: Key) => {
-    setExpandedKeys(toggleKey(expandedKeys, key));
+    let newSet = toggleKey(currentExpandedKeys.current, key);
+    currentExpandedKeys.current = newSet;
+    setExpandedKeys(newSet);
   };
 
   return {