fix: ActionBar overflow menu not closing on select (#7535)

Author: francinelucca

.changeset/sixty-keys-perform.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix: ActionBar overflow menu not closing on select

package-lock.json

@@ -67,7 +67,11 @@ export const Default = () => (
     <ActionBar.IconButton icon={QuoteIcon} aria-label="Insert Quote"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
+    <ActionBar.IconButton
+      icon={TasklistIcon}
+      aria-label="Task List"
+      onClick={() => alert('Task List clicked')}
+    ></ActionBar.IconButton>
   </ActionBar>
 )
 

packages/react/src/ActionBar/ActionBar.stories.tsx

@@ -3,11 +3,9 @@ import React, {useState, useCallback, useRef, forwardRef, useId} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
 import {ActionList, type ActionListItemProps} from '../ActionList'
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
-import {useOnEscapePress} from '../hooks/useOnEscapePress'
 import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
 import {useResizeObserver} from '../hooks/useResizeObserver'
 
-import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 import type {IconButtonProps} from '../Button'
 import {IconButton} from '../Button'
 import {ActionMenu} from '../ActionMenu'
@@ -322,8 +320,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     if (!Number.isNaN(parsed)) setComputedGap(parsed)
   }, [gap])
   const moreMenuRef = useRef<HTMLLIElement>(null)
-  const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
-  const containerRef = React.useRef<HTMLUListElement>(null)
 
   useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
     const navWidth = resizeObserverEntries[0].contentRect.width
@@ -343,29 +339,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     [menuItemIds],
   )
 
-  const [isWidgetOpen, setIsWidgetOpen] = useState(false)
-
-  const closeOverlay = React.useCallback(() => {
-    setIsWidgetOpen(false)
-  }, [setIsWidgetOpen])
-
-  const focusOnMoreMenuBtn = React.useCallback(() => {
-    moreMenuBtnRef.current?.focus()
-  }, [])
-
-  useOnEscapePress(
-    (event: KeyboardEvent) => {
-      if (isWidgetOpen) {
-        event.preventDefault()
-        closeOverlay()
-        focusOnMoreMenuBtn()
-      }
-    },
-    [isWidgetOpen],
-  )
-
-  useOnOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [moreMenuBtnRef]})
-
   useFocusZone({
     containerRef: listRef,
     bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
@@ -415,11 +388,8 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                       return (
                         <ActionList.Item
                           key={label}
-                          // eslint-disable-next-line primer-react/prefer-action-list-item-onselect
-                          onClick={(event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
-                            closeOverlay()
-                            focusOnMoreMenuBtn()
-                            typeof onClick === 'function' && onClick(event)
+                          onSelect={event => {
+                            typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
                           }}
                           disabled={disabled}
                         >
@@ -469,8 +439,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                                 <ActionList.Item
                                   key={key}
                                   onSelect={event => {
-                                    closeOverlay()
-                                    focusOnMoreMenuBtn()
                                     typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
                                   }}
                                   disabled={disabled}