Skip to content

Commit c6b9e25

Browse files
Revert "fix: prevent closing menu when event.preventDefault() is called on ActionList.Item's onSelect handler by @gr2m (#3346)"
This reverts commit 6304923.
1 parent 78b01ad commit c6b9e25

File tree

6 files changed

+13
-59
lines changed

6 files changed

+13
-59
lines changed

.changeset/brave-cherries-march.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

generated/components.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@
163163
"name": "onSelect",
164164
"type": "(event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void",
165165
"defaultValue": "",
166-
"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 `<ActionMenu />`"
166+
"description": "Callback that is called when the item is selected using either the mouse or keyboard."
167167
},
168168
{
169169
"name": "selected",

src/ActionList/ActionList.docs.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"name": "onSelect",
6363
"type": "(event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void",
6464
"defaultValue": "",
65-
"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 `<ActionMenu />`"
65+
"description": "Callback that is called when the item is selected using either the mouse or keyboard."
6666
},
6767
{
6868
"name": "selected",

src/ActionList/Item.tsx

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
2424
disabled = false,
2525
selected = undefined,
2626
active = false,
27-
onSelect: onSelectUser,
27+
onSelect,
2828
sx: sxProp = defaultSxProp,
2929
id,
3030
role,
@@ -42,19 +42,6 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
4242
const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext)
4343
const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
4444

45-
const onSelect = React.useCallback(
46-
(
47-
event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>,
48-
// eslint-disable-next-line @typescript-eslint/ban-types
49-
afterSelect?: Function,
50-
) => {
51-
if (typeof onSelectUser === 'function') onSelectUser(event)
52-
if (event.defaultPrevented) return
53-
if (typeof afterSelect === 'function') afterSelect()
54-
},
55-
[onSelectUser],
56-
)
57-
5845
const selectionVariant: ActionListProps['selectionVariant'] = groupSelectionVariant
5946
? groupSelectionVariant
6047
: listSelectionVariant
@@ -162,16 +149,22 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
162149
const clickHandler = React.useCallback(
163150
(event: React.MouseEvent<HTMLLIElement>) => {
164151
if (disabled) return
165-
onSelect(event, afterSelect)
152+
if (!event.defaultPrevented) {
153+
if (typeof onSelect === 'function') onSelect(event)
154+
// if this Item is inside a Menu, close the Menu
155+
if (typeof afterSelect === 'function') afterSelect()
156+
}
166157
},
167158
[onSelect, disabled, afterSelect],
168159
)
169160

170161
const keyPressHandler = React.useCallback(
171162
(event: React.KeyboardEvent<HTMLLIElement>) => {
172163
if (disabled) return
173-
if ([' ', 'Enter'].includes(event.key)) {
174-
onSelect(event, afterSelect)
164+
if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
165+
if (typeof onSelect === 'function') onSelect(event)
166+
// if this Item is inside a Menu, close the Menu
167+
if (typeof afterSelect === 'function') afterSelect()
175168
}
176169
},
177170
[onSelect, disabled, afterSelect],

src/ActionMenu/ActionMenu.examples.stories.tsx

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ import {
1111
NumberIcon,
1212
CalendarIcon,
1313
XIcon,
14-
CheckIcon,
15-
CopyIcon,
1614
} from '@primer/octicons-react'
1715

1816
export default {
@@ -275,35 +273,3 @@ export const MultipleSections = () => {
275273
</ActionMenu>
276274
)
277275
}
278-
279-
export const DelayedMenuClose = () => {
280-
const [open, setOpen] = React.useState(false)
281-
const [copyLinkSuccess, setCopyLinkSuccess] = React.useState(false)
282-
const onSelect = (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => {
283-
event.preventDefault()
284-
285-
setCopyLinkSuccess(true)
286-
setTimeout(() => {
287-
setOpen(false)
288-
setCopyLinkSuccess(false)
289-
}, 700)
290-
}
291-
292-
return (
293-
<>
294-
<h1>Delayed Menu Close</h1>
295-
296-
<ActionMenu open={open} onOpenChange={setOpen}>
297-
<ActionMenu.Button>Anchor</ActionMenu.Button>
298-
<ActionMenu.Overlay>
299-
<ActionList>
300-
<ActionList.Item onSelect={onSelect}>
301-
<ActionList.LeadingVisual>{copyLinkSuccess ? <CheckIcon /> : <CopyIcon />}</ActionList.LeadingVisual>
302-
{copyLinkSuccess ? 'Copied!' : 'Copy link'}
303-
</ActionList.Item>
304-
</ActionList>
305-
</ActionMenu.Overlay>
306-
</ActionMenu>
307-
</>
308-
)
309-
}

src/__tests__/ActionMenu.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function Example(): JSX.Element {
2222
<ActionList.Divider />
2323
<ActionList.Item>Copy link</ActionList.Item>
2424
<ActionList.Item>Edit file</ActionList.Item>
25-
<ActionList.Item variant="danger" onSelect={event => event.preventDefault()}>
25+
<ActionList.Item variant="danger" onClick={event => event.preventDefault()}>
2626
Delete file
2727
</ActionList.Item>
2828
<ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="s">

0 commit comments

Comments
 (0)