diff --git a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx index 2d26c33d0..55dbde5b0 100644 --- a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx +++ b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx @@ -183,20 +183,26 @@ export const TagsListItem: FunctionComponent = observer( const readyToDrop = isOver && canDrop - const toggleContextMenu = useCallback(() => { - if (!menuButtonRef.current) { - return - } + const toggleContextMenu: MouseEventHandler = useCallback( + (event) => { + event.preventDefault() + event.stopPropagation() - const contextMenuOpen = tagsState.contextMenuOpen - const menuButtonRect = menuButtonRef.current?.getBoundingClientRect() + if (!menuButtonRef.current) { + return + } - if (contextMenuOpen) { - tagsState.setContextMenuOpen(false) - } else { - onContextMenu(tag, menuButtonRect.right, menuButtonRect.top) - } - }, [onContextMenu, tagsState, tag]) + const contextMenuOpen = tagsState.contextMenuOpen + const menuButtonRect = menuButtonRef.current?.getBoundingClientRect() + + if (contextMenuOpen) { + tagsState.setContextMenuOpen(false) + } else { + onContextMenu(tag, menuButtonRect.right, menuButtonRect.top) + } + }, + [onContextMenu, tagsState, tag], + ) return ( <>