Merge branch 'upstream-development'

Author: pol-rivero

app/src/ui/app-menu/app-menu.tsx

@@ -77,6 +77,12 @@ export class AppMenu extends React.Component<IAppMenuProps, {}> {
    */
   private expandCollapseTimer: number | null = null
 
+  /**
+   * Refs to the menu pane elements, indexed by depth. Used to restore
+   * focus when navigating back from a submenu with the left arrow key.
+   */
+  private menuPaneRefs: Map<number, HTMLDivElement | null> = new Map()
+
   private onItemClicked = (
     depth: number,
     item: MenuItem,
@@ -127,6 +133,13 @@ export class AppMenu extends React.Component<IAppMenuProps, {}> {
           menu.withClosedMenu(this.props.state[depth])
         )
 
+        // Restore focus to the parent menu pane to prevent the menu bar
+        // from detecting focus loss and closing the entire menu
+        const parentPane = this.menuPaneRefs.get(depth - 1)
+        if (parentPane) {
+          parentPane.focus()
+        }
+
         event.preventDefault()
       }
     } else if (event.key === 'ArrowRight') {
@@ -211,6 +224,10 @@ export class AppMenu extends React.Component<IAppMenuProps, {}> {
     }
   }
 
+  private onMenuPaneRef = (depth: number, element: HTMLDivElement | null) => {
+    this.menuPaneRefs.set(depth, element)
+  }
+
   private renderMenuPane(depth: number, menu: IMenu): JSX.Element {
     // If the menu doesn't have an id it's the root menu
     const key = menu.id || '@'
@@ -230,6 +247,7 @@ export class AppMenu extends React.Component<IAppMenuProps, {}> {
         enableAccessKeyNavigation={this.props.enableAccessKeyNavigation}
         onClearSelection={this.onClearSelection}
         ariaLabelledby={this.props.ariaLabelledby}
+        onRef={this.onMenuPaneRef}
       />
     )
   }

app/src/ui/app-menu/menu-pane.tsx

@@ -98,9 +98,16 @@ interface IMenuPaneProps {
   readonly allowFirstCharacterNavigation?: boolean
 
   readonly renderLabel?: (item: MenuItem) => JSX.Element | undefined
+
+  /** Optional callback for capturing a ref to the menu pane element */
+  readonly onRef?: (depth: number, element: HTMLDivElement | null) => void
 }
 
 export class MenuPane extends React.Component<IMenuPaneProps> {
+  private onMenuPaneRef = (element: HTMLDivElement | null) => {
+    this.props.onRef?.(this.props.depth, element)
+  }
+
   private onRowClick = (
     item: MenuItem,
     event: React.MouseEvent<HTMLDivElement>
@@ -258,6 +265,7 @@ export class MenuPane extends React.Component<IMenuPaneProps> {
        */
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
+        ref={this.onMenuPaneRef}
         className={className}
         onMouseEnter={this.onMouseEnter}
         onKeyDown={this.onKeyDown}

app/src/ui/changes/commit-message-avatar.tsx

@@ -424,6 +424,7 @@ export class CommitMessageAvatar extends React.Component<
         }
         anchorPosition={PopoverAnchorPosition.RightBottom}
         decoration={PopoverDecoration.Balloon}
+        onMousedownOutside={this.closePopover}
         onClickOutside={this.closePopover}
         ariaLabelledby="commit-avatar-popover-header"
       >