regression: Dragging the VoIP popup handle with right click keeps moving the element after release

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();

packages/ui-voip/src/components/VoipPopupDraggable/useDraggable.stories.tsx

@@ -197,6 +197,7 @@ type Story = StoryObj<typeof meta>;
 
 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);
+			});
+		});
 	},
 };