title: Cypress click/trigger not triggering eventListeners
body: <p>For the past couple of months, I've been developing a workflow modeler for the final stage of my SO-driven SE education. I've been using <a href="https://github.com/jgraph/mxgraph" rel="nofollow noreferrer">mxGraph</a> and vanilla javascript and i tried setting up some basic E2E tests using Cypress. </p>
  
  <p>I encountered some problems with (I'm assuming) triggering the event listeners. Some buttons DO respond to cypress clicks/triggers and some DONT. None of the buttons in my application have a onClick actions or any other attribute that contains a model or controller method. Instead all buttons and keys have handlers and listeners, created by the mxGraph-editor utility class. </p>
  
  <p>I've tried to recreate some of the actions using the same E2E tests on the public examples of mxGraph(see cypress code). The dragging of an object (from menu to canvas (#1) &amp; from canvas to canvas(#4)) AND the selecting of an object(#2) sadly don't work. </p>
  
  <p>The double clicking on an object and modifying the text(#3) DOES work however... and I'm lost. I've tried all the different ways of forcing, waiting, clicking and triggering but all to no avail. </p>
  
  <pre><code>describe('mxGraph "ports" example', function () {
  
      it('Start ports example', function () {
          cy.visit('https://jgraph.github.io/mxgraph/javascript/examples/ports.html')
          cy.wait(500)
      })
      // Example #1 : FAIL
      it('#1 Create new object by dragging', function () {
          cy.get('div[id="sidebarContainer"]').find('img[title="Drag this to the diagram to create a new vertex"]').first()
             .trigger('mousedown', { force: true})
              .trigger('mousemove', { clientX: 250, clientY: 250, force: true})
              .trigger('mouseup', {force: true})
          cy.get('div[id="graphContainer"]').find('svg').trigger('drop', { force: true })
          cy.wait(500)
      })
  })
  </code></pre>
  
  <pre><code>describe('mxGraph "user object" example', function () {
  
      it('Start userobject example', function () {
          cy.visit('https://jgraph.github.io/mxgraph/javascript/examples/userobject.html')
          cy.wait(500)
      })
      // Example #2 : FAIL
      it('#2 Single click on object (green highlight should appear)', function () {
          cy.get('rect').first().click({ force: true })
          cy.wait(500)
      })
      // Example #3 : PASS
      it('#3 Double click &amp; edit object (Text should be modified)', function () {
          cy.get('rect').first().dblclick({ force: true })
          cy.wait(500)
          cy.get('div [class="mxCellEditor mxPlainTextEditor"]').first().type('text modified')
          cy.wait(500)
      })
      // Example #4 : FAIL
      it('#4 Drags object to center of canvas (Object should be moved)', function () {
          cy.get('rect').first()
              .trigger('mousedown', { force: true})
              .trigger('mousemove', { clientX: 250, clientY: 250, force: true})
              .trigger('mouseup', {force: true})
          cy.wait(500)
      })
  })
  </code></pre>
  
  <p>Any help is greatly appreciated. Thanks in advance!</p>