From 415dfbe00b7ae978e6f6b1b88ecfec0284afbd06 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 12 Feb 2026 14:36:50 -0500 Subject: [PATCH 1/4] fix: ActionBar overflow menu not closing on select --- package-lock.json | 8 ++++---- packages/react/src/ActionBar/ActionBar.stories.tsx | 6 +++++- packages/react/src/ActionBar/ActionBar.tsx | 5 ++--- 3 files changed, 11 insertions(+), 8 deletions(-) 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..4a3fdfac83d 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -415,11 +415,10 @@ export const ActionBar: React.FC> = prop return ( ) => { + onSelect={event => { closeOverlay() focusOnMoreMenuBtn() - typeof onClick === 'function' && onClick(event) + typeof onClick === 'function' && onClick(event as React.MouseEvent) }} disabled={disabled} > From eb87b05da006ad5f2b3101631bb392e6d580ce5d Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 12 Feb 2026 15:29:44 -0500 Subject: [PATCH 2/4] remove unnecessary code --- packages/react/src/ActionBar/ActionBar.tsx | 29 ---------------------- 1 file changed, 29 deletions(-) diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index 4a3fdfac83d..a48dee69720 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' @@ -343,29 +341,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, @@ -416,8 +391,6 @@ export const ActionBar: React.FC> = prop { - closeOverlay() - focusOnMoreMenuBtn() typeof onClick === 'function' && onClick(event as React.MouseEvent) }} disabled={disabled} @@ -468,8 +441,6 @@ export const ActionBar: React.FC> = prop { - closeOverlay() - focusOnMoreMenuBtn() typeof onClick === 'function' && onClick(event as React.MouseEvent) }} disabled={disabled} From df0c2f3e04f77a3dfbe18fee43cb1f7ce3ff8862 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Thu, 12 Feb 2026 15:30:30 -0500 Subject: [PATCH 3/4] Fix ActionBar overflow menu not closing on select --- .changeset/sixty-keys-perform.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sixty-keys-perform.md 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 From 08979c8d4a02b2a42c620a7466e151c56036e7cb Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 12 Feb 2026 15:34:15 -0500 Subject: [PATCH 4/4] remove unused refs --- packages/react/src/ActionBar/ActionBar.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index a48dee69720..1c2fb0da71a 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -320,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