adobe
`isVirtualPointerEvent` classifies playwright `click` as drag start
Provide a general summary of the issue here
I'm writing tests for a draggable collection and my tests for clicking on an item in the collection are breaking because isVirtualPointerEvent returns true for playwright click events
🤔 Expected Behavior?
Click doesn't trigger drag start in playwright
😯 Current Behavior
Click does trigger drag start and freezes the app
💁 Possible Solution
I can write my tests to work around it but would be nice to fix
🔦 Context
No response
🖥️ Steps to Reproduce
If you want I can try to make a small example but clicking on an item in any draggable collaection through playwright should work
Version
@react-aria/dnd 3.3.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Mac
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
Can you provide all the events that Playwright triggers for a click along with the event properties? something along these lines https://github.com/adobe/react-spectrum/issues/4753#issuecomment-1629761032 ?
onPointerDown
{
"_reactName": "onPointerDown",
"_targetInst": null,
"type": "pointerdown",
"nativeEvent": {
"isTrusted": true
},
"target": "Node",
"currentTarget": null,
"eventPhase": 3,
"bubbles": true,
"cancelable": true,
"timeStamp": 2879.800000011921,
"defaultPrevented": false,
"isTrusted": true,
"view": "Window",
"detail": 0,
"screenX": 59,
"screenY": 59,
"clientX": 59,
"clientY": 59,
"pageX": 59,
"pageY": 59,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"button": 0,
"buttons": 1,
"relatedTarget": null,
"movementX": 0,
"movementY": 0,
"pointerId": 1,
"width": 1,
"height": 1,
"pressure": 0,
"tangentialPressure": 0,
"tiltX": 0,
"tiltY": 0,
"twist": 0,
"pointerType": "mouse",
"isPrimary": true
}
onMouseDown
{
"_reactName": "onMouseDown",
"_targetInst": null,
"type": "mousedown",
"nativeEvent": {
"isTrusted": true
},
"target": "Node",
"currentTarget": null,
"eventPhase": 3,
"bubbles": true,
"cancelable": true,
"timeStamp": 2879.800000011921,
"defaultPrevented": false,
"isTrusted": true,
"view": "Window",
"detail": 1,
"screenX": 59,
"screenY": 59,
"clientX": 59,
"clientY": 59,
"pageX": 59,
"pageY": 59,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"button": 0,
"buttons": 1,
"relatedTarget": null,
"movementX": 0,
"movementY": 0
}
onPointerUp
{
"_reactName": "onPointerUp",
"_targetInst": null,
"type": "pointerup",
"nativeEvent": {
"isTrusted": true
},
"target": "Node",
"currentTarget": null,
"eventPhase": 3,
"bubbles": true,
"cancelable": true,
"timeStamp": 2879.900000035763,
"defaultPrevented": false,
"isTrusted": true,
"view": "Window",
"detail": 0,
"screenX": 59,
"screenY": 59,
"clientX": 59,
"clientY": 59,
"pageX": 59,
"pageY": 59,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"button": 0,
"buttons": 0,
"relatedTarget": null,
"movementX": 0,
"movementY": 0,
"pointerId": 1,
"width": 1,
"height": 1,
"pressure": 0,
"tangentialPressure": 0,
"tiltX": 0,
"tiltY": 0,
"twist": 0,
"pointerType": "mouse",
"isPrimary": true
}
onMouseUp
{
"_reactName": "onMouseUp",
"_targetInst": null,
"type": "mouseup",
"nativeEvent": {
"isTrusted": true
},
"target": "Node",
"currentTarget": null,
"eventPhase": 3,
"bubbles": true,
"cancelable": true,
"timeStamp": 2879.900000035763,
"defaultPrevented": false,
"isTrusted": true,
"view": "Window",
"detail": 1,
"screenX": 59,
"screenY": 59,
"clientX": 59,
"clientY": 59,
"pageX": 59,
"pageY": 59,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"button": 0,
"buttons": 0,
"relatedTarget": null,
"movementX": 0,
"movementY": 0
}
onClick
{
"_reactName": "onClick",
"_targetInst": null,
"type": "click",
"nativeEvent": {
"isTrusted": true
},
"target": "Node",
"currentTarget": null,
"eventPhase": 3,
"bubbles": true,
"cancelable": true,
"timeStamp": 2879.900000035763,
"defaultPrevented": false,
"isTrusted": true,
"view": "Window",
"detail": 1,
"screenX": 59,
"screenY": 59,
"clientX": 59,
"clientY": 59,
"pageX": 59,
"pageY": 59,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"button": 0,
"buttons": 0,
"relatedTarget": null,
"movementX": 0,
"movementY": 0
}
If you used my codesandbox for that, could you try it on this one as well? https://codesandbox.io/s/determined-bassi-dnmlmw?file=/src/App.js
I ask because I suspect Playwright of firing compatibility events that it shouldn't be. This was an issue in user event as well. In this codesandbox we should only see pointer events and the click, no mouse events.
If you didn't use the codesandbox for the event data you posted above, it'd still be useful to know. Thank you!
For future people here is a drag to that fires the right events for me. It also supports steps
export async function dragTo(
page: Page,
source: Locator,
target: Locator,
{
steps,
sourcePosition,
targetPosition,
shouldMouseUp = true,
}: {
steps?: number;
/**
* Position to drag from in source element
* @default center of source element
*/
sourcePosition?: { x: number; y: number };
/**
* Position to drag to in target element
* @default center of target element
*/
targetPosition?: { x: number; y: number };
shouldMouseUp?: boolean;
},
) {
await test.step(`Dragging ${source} to ${target}`, async () => {
const sourceBox = (await source.boundingBox())!;
const targetBox = (await target.boundingBox())!;
const sourceX = sourcePosition ? sourcePosition.x : sourceBox.width / 2;
const sourceY = sourcePosition ? sourcePosition.y : sourceBox.height / 2;
const startX = sourceBox.x + sourceX;
const startY = sourceBox.y + sourceY;
await test.step(`Start drag interaction`, async () => {
await page.mouse.move(startX, startY);
await page.mouse.down();
await source.dispatchEvent('dragstart', {
clientX: startX,
clientY: startY,
});
});
const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
const targetBaseX = targetPosition ? targetPosition.x : targetBox.width / 2;
const targetBaseY = targetPosition ? targetPosition.y : targetBox.height / 2;
const targetPoint = {
clientX: targetBox.x + targetBaseX,
clientY: targetBox.y + targetBaseY,
};
const dummyEvent = {
clientX: targetPoint.clientX,
clientY: targetPoint.clientY,
dataTransfer,
};
await test.step(`Execute drag interaction`, async () => {
await source.dispatchEvent('drag', dummyEvent);
await target.dispatchEvent('dragover', dummyEvent);
await page.mouse.move(targetPoint.clientX, targetPoint.clientY, {
steps,
});
});
await test.step(`End drag interaction`, async () => {
if (shouldMouseUp) {
await page.mouse.up();
await target.dispatchEvent('drop', dummyEvent);
}
});
});
}
I am facing similar issue. Even the above code is not working for me.
@snowystinger Here are the events playwright fires for your codesandbox:
