diff --git a/.changeset/sixty-keys-perform.md b/.changeset/sixty-keys-perform.md
new file mode 100644
index 00000000000..e52b5b7b231
--- /dev/null
+++ b/.changeset/sixty-keys-perform.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix: ActionBar overflow menu not closing on select
diff --git a/package-lock.json b/package-lock.json
index a8504a0d680..bdb5af11342 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,7 +81,7 @@
"react-dom": "^18.3.1"
},
"devDependencies": {
- "@primer/react": "38.10.0",
+ "@primer/react": "38.11.0",
"@primer/styled-react": "1.0.3",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.0",
@@ -95,7 +95,7 @@
"name": "example-nextjs",
"version": "0.0.0",
"dependencies": {
- "@primer/react": "38.10.0",
+ "@primer/react": "38.11.0",
"@primer/styled-react": "1.0.3",
"next": "^16.1.5",
"react": "^19.2.0",
@@ -138,7 +138,7 @@
"version": "0.0.0",
"dependencies": {
"@primer/octicons-react": "^19.21.0",
- "@primer/react": "38.10.0",
+ "@primer/react": "38.11.0",
"@primer/styled-react": "1.0.3",
"clsx": "^2.1.1",
"next": "^16.1.5",
@@ -27004,7 +27004,7 @@
},
"packages/react": {
"name": "@primer/react",
- "version": "38.10.0",
+ "version": "38.11.0",
"license": "MIT",
"dependencies": {
"@github/mini-throttle": "^2.1.1",
diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx
index 06cb18045dd..7155f8624d9 100644
--- a/packages/react/src/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.stories.tsx
@@ -67,7 +67,11 @@ export const Default = () => (
-
+ alert('Task List clicked')}
+ >
)
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 4bb9d6e2ec4..1c2fb0da71a 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.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> = prop
if (!Number.isNaN(parsed)) setComputedGap(parsed)
}, [gap])
const moreMenuRef = useRef(null)
- const moreMenuBtnRef = useRef(null)
- const containerRef = React.useRef(null)
useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
const navWidth = resizeObserverEntries[0].contentRect.width
@@ -343,29 +339,6 @@ export const ActionBar: React.FC> = 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> = prop
return (
) => {
- closeOverlay()
- focusOnMoreMenuBtn()
- typeof onClick === 'function' && onClick(event)
+ onSelect={event => {
+ typeof onClick === 'function' && onClick(event as React.MouseEvent)
}}
disabled={disabled}
>
@@ -469,8 +439,6 @@ export const ActionBar: React.FC> = prop
{
- closeOverlay()
- focusOnMoreMenuBtn()
typeof onClick === 'function' && onClick(event as React.MouseEvent)
}}
disabled={disabled}