diff --git a/.changeset/brave-cherries-march.md b/.changeset/brave-cherries-march.md deleted file mode 100644 index d347b7a9a3b..00000000000 --- a/.changeset/brave-cherries-march.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -ActionMenu: Calling `event.preventDefault` inside `onSelect` of `ActionList.Item` will prevent the default behavior of closing the menu diff --git a/generated/components.json b/generated/components.json index 10fca0f4aed..7d2d0a079a8 100644 --- a/generated/components.json +++ b/generated/components.json @@ -163,7 +163,7 @@ "name": "onSelect", "type": "(event: React.MouseEvent | React.KeyboardEvent) => void", "defaultValue": "", - "description": "Callback that is called when the item is selected using either the mouse or keyboard. `event.preventDefault()` will prevent a menu from closing when within an ``" + "description": "Callback that is called when the item is selected using either the mouse or keyboard." }, { "name": "selected", diff --git a/src/ActionList/ActionList.docs.json b/src/ActionList/ActionList.docs.json index 18610f7f622..d74f3a0290a 100644 --- a/src/ActionList/ActionList.docs.json +++ b/src/ActionList/ActionList.docs.json @@ -62,7 +62,7 @@ "name": "onSelect", "type": "(event: React.MouseEvent | React.KeyboardEvent) => void", "defaultValue": "", - "description": "Callback that is called when the item is selected using either the mouse or keyboard. `event.preventDefault()` will prevent a menu from closing when within an ``" + "description": "Callback that is called when the item is selected using either the mouse or keyboard." }, { "name": "selected", diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 56e91d0070c..8064ff2f1c1 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -24,7 +24,7 @@ export const Item = React.forwardRef( disabled = false, selected = undefined, active = false, - onSelect: onSelectUser, + onSelect, sx: sxProp = defaultSxProp, id, role, @@ -42,19 +42,6 @@ export const Item = React.forwardRef( const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext) const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext) - const onSelect = React.useCallback( - ( - event: React.MouseEvent | React.KeyboardEvent, - // eslint-disable-next-line @typescript-eslint/ban-types - afterSelect?: Function, - ) => { - if (typeof onSelectUser === 'function') onSelectUser(event) - if (event.defaultPrevented) return - if (typeof afterSelect === 'function') afterSelect() - }, - [onSelectUser], - ) - const selectionVariant: ActionListProps['selectionVariant'] = groupSelectionVariant ? groupSelectionVariant : listSelectionVariant @@ -162,7 +149,11 @@ export const Item = React.forwardRef( const clickHandler = React.useCallback( (event: React.MouseEvent) => { if (disabled) return - onSelect(event, afterSelect) + if (!event.defaultPrevented) { + if (typeof onSelect === 'function') onSelect(event) + // if this Item is inside a Menu, close the Menu + if (typeof afterSelect === 'function') afterSelect() + } }, [onSelect, disabled, afterSelect], ) @@ -170,8 +161,10 @@ export const Item = React.forwardRef( const keyPressHandler = React.useCallback( (event: React.KeyboardEvent) => { if (disabled) return - if ([' ', 'Enter'].includes(event.key)) { - onSelect(event, afterSelect) + if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) { + if (typeof onSelect === 'function') onSelect(event) + // if this Item is inside a Menu, close the Menu + if (typeof afterSelect === 'function') afterSelect() } }, [onSelect, disabled, afterSelect], diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx index f7391545f4a..ef7ffdc8f59 100644 --- a/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -11,8 +11,6 @@ import { NumberIcon, CalendarIcon, XIcon, - CheckIcon, - CopyIcon, } from '@primer/octicons-react' export default { @@ -275,35 +273,3 @@ export const MultipleSections = () => { ) } - -export const DelayedMenuClose = () => { - const [open, setOpen] = React.useState(false) - const [copyLinkSuccess, setCopyLinkSuccess] = React.useState(false) - const onSelect = (event: React.MouseEvent | React.KeyboardEvent) => { - event.preventDefault() - - setCopyLinkSuccess(true) - setTimeout(() => { - setOpen(false) - setCopyLinkSuccess(false) - }, 700) - } - - return ( - <> -

Delayed Menu Close

- - - Anchor - - - - {copyLinkSuccess ? : } - {copyLinkSuccess ? 'Copied!' : 'Copy link'} - - - - - - ) -} diff --git a/src/__tests__/ActionMenu.test.tsx b/src/__tests__/ActionMenu.test.tsx index bf33d15c491..f2b41c86df1 100644 --- a/src/__tests__/ActionMenu.test.tsx +++ b/src/__tests__/ActionMenu.test.tsx @@ -22,7 +22,7 @@ function Example(): JSX.Element { Copy link Edit file - event.preventDefault()}> + event.preventDefault()}> Delete file