From a25f728f1613f3b41cd7d4e28941191cf7749a88 Mon Sep 17 00:00:00 2001
From: Adel Khamatov <adel.khamatov@devexpress.com>
Date: Thu, 12 Dec 2024 09:30:03 +0200
Subject: [PATCH 1/3] fix: call a DX event after using an HTML draggable
 element

---
 packages/devextreme/js/__internal/events/pointer/m_mouse.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devextreme/js/__internal/events/pointer/m_mouse.ts b/packages/devextreme/js/__internal/events/pointer/m_mouse.ts
index c5bb04abef0d..8735c366d8d0 100644
--- a/packages/devextreme/js/__internal/events/pointer/m_mouse.ts
+++ b/packages/devextreme/js/__internal/events/pointer/m_mouse.ts
@@ -7,7 +7,7 @@ const eventMap = {
   dxpointerdown: 'mousedown',
   dxpointermove: 'mousemove',
   dxpointerup: 'mouseup',
-  dxpointercancel: '',
+  dxpointercancel: 'pointercancel',
   dxpointerover: 'mouseover',
   dxpointerout: 'mouseout',
   dxpointerenter: 'mouseenter',

From 3ec812ad67c37f5e5c6510aa6335f74df2f6fbfa Mon Sep 17 00:00:00 2001
From: Adel Khamatov <hamatovadel@gmail.com>
Date: Fri, 13 Dec 2024 12:29:20 +0200
Subject: [PATCH 2/3] chore: add test for the `T1260277` ticket

---
 .../tests/common/eventsEngine.ts              | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 e2e/testcafe-devextreme/tests/common/eventsEngine.ts

diff --git a/e2e/testcafe-devextreme/tests/common/eventsEngine.ts b/e2e/testcafe-devextreme/tests/common/eventsEngine.ts
new file mode 100644
index 000000000000..fc3d070ac956
--- /dev/null
+++ b/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();
+});

From 938f2457afca50d5c01b11ec631faeaab66a3773 Mon Sep 17 00:00:00 2001
From: Adel Khamatov <hamatovadel@gmail.com>
Date: Fri, 13 Dec 2024 15:48:18 +0200
Subject: [PATCH 3/3] fix: call `dxpointercancel` after `dragstart` for safari

---
 packages/devextreme/js/__internal/events/pointer/m_mouse.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/devextreme/js/__internal/events/pointer/m_mouse.ts b/packages/devextreme/js/__internal/events/pointer/m_mouse.ts
index 8735c366d8d0..1213ea38e7ee 100644
--- a/packages/devextreme/js/__internal/events/pointer/m_mouse.ts
+++ b/packages/devextreme/js/__internal/events/pointer/m_mouse.ts
@@ -1,5 +1,6 @@
 import BaseStrategy from '@js/common/core/events/pointer/base';
 import Observer from '@js/common/core/events/pointer/observer';
+import browser from '@js/core/utils/browser';
 import { extend } from '@js/core/utils/extend';
 
 /* eslint-disable spellcheck/spell-checker */
@@ -14,6 +15,11 @@ const eventMap = {
   dxpointerleave: 'mouseleave',
 };
 
+// due to this https://bugs.webkit.org/show_bug.cgi?id=222632 issue
+if (browser.safari) {
+  eventMap.dxpointercancel = 'dragstart';
+}
+
 const normalizeMouseEvent = function (e) {
   e.pointerId = 1;