diff --git a/packages/ui-voip/src/components/VoipPopupDraggable/DraggableCore.ts b/packages/ui-voip/src/components/VoipPopupDraggable/DraggableCore.ts index ec64041f40464..a28377a7ec272 100644 --- a/packages/ui-voip/src/components/VoipPopupDraggable/DraggableCore.ts +++ b/packages/ui-voip/src/components/VoipPopupDraggable/DraggableCore.ts @@ -341,6 +341,9 @@ interface IHandleElement { onGrab(cb: (event: [mousePosition: PointCoordinates, elementRect: IGenericRect]) => void): OffCallbackHandler; } +const isLeftClick = (event: PointerEvent) => event.button === 0; +const isMousePointer = (event: PointerEvent) => event.pointerType === 'mouse'; + class HandleDomElement extends Emitter<{ grab: [PointCoordinates, IGenericRect]; @@ -350,7 +353,7 @@ class HandleDomElement public setElement(element: HTMLElement) { const onGrab = (event: PointerEvent) => { const element = event.currentTarget as HTMLElement; - if (!element) { + if (!element || (isMousePointer(event) && !isLeftClick(event))) { return; } event.preventDefault(); diff --git a/packages/ui-voip/src/components/VoipPopupDraggable/useDraggable.stories.tsx b/packages/ui-voip/src/components/VoipPopupDraggable/useDraggable.stories.tsx index d1f3534a791c1..8a10245222d26 100644 --- a/packages/ui-voip/src/components/VoipPopupDraggable/useDraggable.stories.tsx +++ b/packages/ui-voip/src/components/VoipPopupDraggable/useDraggable.stories.tsx @@ -197,6 +197,7 @@ type Story = StoryObj; export const Default: Story = {}; +// TODO: test other pointer types (pen, touch, etc) // TODO: use `userEvent` for all tests const moveHelper = async (handle: HTMLElement, offset: { x: number; y: number }) => { const handleRect = handle.getBoundingClientRect(); @@ -253,6 +254,36 @@ export const DraggingBehavior: Story = { expect(finalRect.y).toBeCloseTo(initialRect.y, 0); }); }); + + await step('should not allow dragging with right click', async () => { + const draggable = await canvas.findByTestId('draggable-box'); + const handle = await canvas.findByTestId('drag-handle'); + + const initialRect = draggable.getBoundingClientRect(); + + // for some reason `fireEvent` and `userEvent` do not change the `button` property of the event + // so we need to create a new event manually + await fireEvent( + handle, + new PointerEvent('pointerdown', { + button: 2, + pointerType: 'mouse', + }), + ); + + await fireEvent.pointerMove(document.documentElement, { + clientX: 50, + clientY: 50, + }); + + await fireEvent.pointerUp(document.documentElement); + + await waitFor(() => { + const finalRect = draggable.getBoundingClientRect(); + expect(finalRect.x).toBeCloseTo(initialRect.x, 0); + expect(finalRect.y).toBeCloseTo(initialRect.y, 0); + }); + }); }, };