fix: call a DX event after using an HTML draggable element (T1260277)

e2e/testcafe-devextreme/tests/common/eventsEngine.ts

@@ -0,0 +1,61 @@
+import { ClientFunction, Selector } from 'testcafe';
+import url from '../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Events`
+  .page(url(__dirname, '../container.html'));
+
+const init = ClientFunction(() => {
+  const markup = `<div class="dx-viewport demo-container">
+      <div id="draggable" draggable="true" style="width: 200px; height: 200px; background-color: red;"></div>
+      <div id="target" style="width: 200px; height: 200px; background-color: black;"></div>
+      <div>hoverStartTriggerCount</div>
+      <div id="hoverStartTriggerCount">0</div>
+      <div>hoverEndTriggerCount</div>
+      <div id="hoverEndTriggerCount">0</div>
+  </div>`;
+
+  $('#container').html(markup);
+
+  const { DevExpress } = (window as any);
+
+  let hoverStartTriggerCount = 0;
+  let hoverEndTriggerCount = 0;
+
+  DevExpress.events.on($('#target'), 'dxhoverstart', () => {
+    hoverStartTriggerCount += 1;
+
+    $('#hoverStartTriggerCount').text(hoverStartTriggerCount);
+  });
+
+  DevExpress.events.on($('#target'), 'dxhoverend', () => {
+    hoverEndTriggerCount += 1;
+
+    $('#hoverEndTriggerCount').text(hoverEndTriggerCount);
+  });
+});
+
+test('The `dxhoverstart` event should be triggered after dragging and dropping an HTML draggable element (T1260277)', async (t) => {
+  const draggable = Selector('#draggable');
+  const target = Selector('#target');
+  const hoverStartTriggerCount = Selector('#hoverStartTriggerCount');
+  const hoverEndTriggerCount = Selector('#hoverEndTriggerCount');
+
+  await t
+    .drag(draggable, 0, 400, { speed: 1 });
+
+  // `.drag` does not trigger the `pointercancel` event.
+  // A sequence of `.drag` calls behaves like a single drag&drop operation,
+  // and each call does not trigger the `pointerup` event.
+  // Even if it did, the `pointercancel` event would not be triggered as specified in:
+  // https://www.w3.org/TR/pointerevents/#suppressing-a-pointer-event-stream
+  // This is a hack to test the event engine's logic.
+  await t.dispatchEvent(draggable, 'pointercancel');
+
+  await t
+    .drag(target, 0, 400, { speed: 1 });
+
+  await t.expect(hoverStartTriggerCount.textContent).eql('1');
+  await t.expect(hoverEndTriggerCount.textContent).eql('1');
+}).before(async () => {
+  await init();
+});

packages/devextreme/js/events/pointer/mouse.js

@@ -1,18 +1,25 @@
 import { extend } from '../../core/utils/extend';
 import BaseStrategy from './base';
 import Observer from './observer';
+import browser from '../../core/utils/browser';
 
 const eventMap = {
     'dxpointerdown': 'mousedown',
     'dxpointermove': 'mousemove',
     'dxpointerup': 'mouseup',
-    'dxpointercancel': '',
+    'dxpointercancel': 'pointercancel',
     'dxpointerover': 'mouseover',
     'dxpointerout': 'mouseout',
     'dxpointerenter': 'mouseenter',
     'dxpointerleave': 'mouseleave'
 };
 
+// due to this https://bugs.webkit.org/show_bug.cgi?id=222632 issue
+if(browser.safari) {
+    // eslint-disable-next-line spellcheck/spell-checker
+    eventMap.dxpointercancel += ' ' + 'dragstart';
+}
+
 const normalizeMouseEvent = function(e) {
     e.pointerId = 1;