Unable to click button after dragging and dropping

[ollyrowe]

Problem

I'm currently experiencing an issue whereby a .click() action is not being invoked after I've completed a series of drag and drop actions.

Reproduction Example

An example of this issue can be found within the first test of this file.

Within this example, we're simulating the dragging and dropping of a component from one area of the display to another. This involves invoking a series of events on the component as defined within this custom Cypress command - the relevant code within this command can be seen below.

return cy
  .wrap(subject)
  .trigger("mousedown", { force: true })
  .trigger("mousemove", coordinates)
  .trigger("mouseup");

When calling a .click() directly after this set of commands, the onClick handler defined on the corresponding React component is not fired.

Workaround

I'm able to work around this issue by invoking a cy.reload() however this is a sub-optimal solution as it doesn't accurately represent the typical behavior of our end users. Within the example described above, performing a reload has allowed me to use the .click() command used on this line without any further issues.