Dispatching MouseEvents is broken after upgrade from version 13.1.2 to 13.1.3

[HWouters]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

13.1.2

Description

After upgrading from 13.1.2 to 13.1.3 our drag and drop tests are failing. It looks like nothing is happening and the events are ignored.
We are using Cypress in similar approach to here: https://stackoverflow.com/questions/55361499/how-to-implement-drag-and-drop-in-cypress-test/55436989#55436989

Reproduction

Steps to reproduce:
Upgrade from 13.1.2 to 13.1.3

Expected Behavior

Able to test drag drop behavior by disptaching mouseevents

Actual Behavior

Mouse events are ignored

Environment

• Angular: 13
• Browser(s): chrome

[crisbeto]

There haven't been any fundamental changes in cdk/drag-drop in a while and I don't see any at all between 13.1.2 and 13.1.3. Could it be something that has changed in your setup?

[HWouters]

@crisbeto I don't think so. I could really pinpoint the problem to this specific version update.

[HWouters]

@crisbeto the problem is probably not in drag drop, but in handling mouseevents. I saw some changes related to that, but don't know if they are causing the issue.

[crisbeto]

Handling of mouse events by which module?

[HWouters]

I don't know the codebase and I might be completely wrong, but I was referring to #23493

[crisbeto]

If #23493 broke anything, it would've only prevented focus indication from showing up on some components. It wouldn't affect any other event listeners.

[HWouters]

Then it has to be something else, bumping the installed version from 13.1.2 to 13.1.3 (@angular/cdk & @angular/material) breaks our drag/drop tests. It looks like mouseevents are ingored, nothing moves anymore after the update.

[crisbeto]

Is it possible that Cypress changed how they're dispatching events?

[HWouters]

No, I narrowed it down to only this version update. If I install 13.1.2 it works, if I install 13.1.3 it doesn't.

[crisbeto]

I'm looking through the changelog between 13.1.2 and 13.1.3, and I really don't see anything that could break event handling.

[HWouters]

@crisbeto thank you for looking into this. I double checked it again, but it is really this version. I could narrow it even further to only @angular/cdk package. Here is a screenshot of my changes: only updating this single version breaks drag an drop testing.

[HWouters]

@crisbeto I think the issue is related to #23493. If I add buttons: 1 to my mouse events it works.

element.dispatchEvent(<any>new MouseEvent('mousedown', { buttons: 1, bubbles: true }));
element.dispatchEvent(<any>new MouseEvent('mousemove', { buttons: 1, clientX: 10, clientY: 0 }));
element.dispatchEvent(<any>new MouseEvent('mousemove', { buttons: 1, clientX: rect.x + 10, clientY: rect.y + 10 }));
element.dispatchEvent(<any>new MouseEvent('mouseup', { buttons: 1 }));

original doesn't work:

element.dispatchEvent(<any>new MouseEvent('mousedown', { bubbles: true }));
element.dispatchEvent(<any>new MouseEvent('mousemove', { clientX: 10, clientY: 0 }));
element.dispatchEvent(<any>new MouseEvent('mousemove', { clientX: rect.x + 10, clientY: rect.y + 10 }));
element.dispatchEvent(<any>new MouseEvent('mouseup'));

[crisbeto]

Interesting, I wonder if your test depends upon the extra change detection that is triggered by focus monitor. If that's the case, you may end up broken again by #15077 which is close to being merged.

[miluoshi]

I can confirm that it also broke our Cypress tests related to drag-n-drop after upgrading from 13.1.2 to 13.1.3 without any other changes.

[jobinsam]

This upgrade broke our drag & drop tests too. Was wondering why these tests are not failing.

https://github.com/angular/components/blob/4d723d7114a33fa8772163e885547e50227dcbeb/src/cdk/drag-drop/directives/drag.spec.ts

[miluoshi]

I've just discovered, that from version @angular/[email protected] you need to set both of those properties (buttons and detail) when creating MouseEvent:

new MouseEvent(eventName, {
  bubbles: true,
  buttons: 1, // Primary button (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons#value)
  cancelable: true,
  clientX: coords.x,
  clientY: coords.y,
  detail: 1, // This needs to be added since @angular/[email protected]
});

Caused by this change #28029

[crisbeto]

Closing since there appears to be workaround.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}