diff --git a/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.test.tsx b/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.test.tsx index 063dba26ff..c262c50f5c 100644 --- a/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.test.tsx +++ b/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.test.tsx @@ -1,3 +1,4 @@ +import { act } from '@testing-library/react'; import { createContextContainer, render, screen, tests, userEvent } from '@mantine-tests/core'; import { Menu } from '../Menu'; import { MenuItem, MenuItemProps, MenuItemStylesNames } from './MenuItem'; @@ -57,4 +58,124 @@ describe('@mantine/core/MenuItem', () => { expect(screen.getByText('test-left-section')).toBeInTheDocument(); expect(screen.getByText('test-right-section')).toBeInTheDocument(); }); + + it('should not prevent default mousedown behavior for draggable elements inside Menu.Item', () => { + const onDragStart = jest.fn(); + const onMouseDown = jest.fn(); + + render( +
+ ); + + const draggableElement = screen.getByTestId('draggable-element'); + + const mouseDownEvent = new MouseEvent('mousedown', { + bubbles: true, + cancelable: true, + button: 0, // left mouse button + }); + + const preventDefaultSpy = jest.spyOn(mouseDownEvent, 'preventDefault'); + + act(() => { + draggableElement.dispatchEvent(mouseDownEvent); + }); + + expect(onMouseDown).toHaveBeenCalled(); + + expect(preventDefaultSpy).not.toHaveBeenCalled(); + }); + + it('should still prevent default mousedown behavior for non-draggable elements', () => { + const onMouseDown = jest.fn(); + + render( + + ); + + const regularElement = screen.getByTestId('regular-element'); + + const mouseDownEvent = new MouseEvent('mousedown', { + bubbles: true, + cancelable: true, + button: 0, + }); + + const preventDefaultSpy = jest.spyOn(mouseDownEvent, 'preventDefault'); + + act(() => { + regularElement.dispatchEvent(mouseDownEvent); + }); + + expect(onMouseDown).toHaveBeenCalled(); + + expect(preventDefaultSpy).toHaveBeenCalled(); + }); + + it('should not prevent default mousedown for interactive elements', () => { + const onMouseDown = jest.fn(); + + render( + + ); + + const inputElement = screen.getByTestId('input-element'); + const mouseDownEvent = new MouseEvent('mousedown', { + bubbles: true, + cancelable: true, + button: 0, + }); + + const preventDefaultSpy = jest.spyOn(mouseDownEvent, 'preventDefault'); + + act(() => { + inputElement.dispatchEvent(mouseDownEvent); + }); + + expect(onMouseDown).toHaveBeenCalled(); + expect(preventDefaultSpy).not.toHaveBeenCalled(); + }); }); diff --git a/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.tsx b/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.tsx index 4f8ea1f41c..00e96f14f0 100644 --- a/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.tsx +++ b/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.tsx @@ -97,9 +97,26 @@ export const MenuItem = polymorphicFactory