From 9faad2a98d87c4c878490bc90ea8cf254ff67db9 Mon Sep 17 00:00:00 2001
From: Adel Khamatov <hamatovadel@gmail.com>
Date: Fri, 13 Dec 2024 15:27:46 +0200
Subject: [PATCH] fix: call `dxpointercancel` after `dragstart` for safari

---
 packages/devextreme/bug.html | 70 ++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 packages/devextreme/bug.html
diff --git a/packages/devextreme/bug.html b/packages/devextreme/bug.html
new file mode 100644
index 00000000000..1668a0ec649
--- /dev/null
+++ b/packages/devextreme/bug.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+        <link
+            rel="stylesheet"
+            href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.material.blue.light.css"
+        />
+        <style>
+            #draggable {
+                background-color: red;
+                width: 100px;
+                height: 100px;
+            }
+
+            #target {
+                background-color: #555;
+                width: 100px;
+                height: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="dx-viewport demo-container">
+            <div id="draggable" draggable="true"></div>
+            <div id="grid"></div>
+            <div id="list"></div>
+
+            <div id="target"></div>
+        </div>
+        <script src="./artifacts/js/jquery.js"></script>
+        <script src="./artifacts/js/dx.all.debug.js"></script>
+        <script>
+            $(() => {
+                // $("#grid").dxDataGrid({
+                //     dataSource: data,
+                //     keyExpr: "id",
+                //     showBorders: true,
+                //     hoverStateEnabled: true,
+                // });
+
+                // $("#list").dxList({
+                //     dataSource: data,
+                // });
+
+                document
+                    .getElementById("draggable")
+                    .addEventListener("dragstart", (event) => {
+                        console.log("dragstart");
+                    });
+
+                DevExpress.events.on($("#target"), "dxhoverstart", () => {
+                    console.log("dxhoverstart");
+                });
+
+                DevExpress.events.on($("#target"), "dxhoverend", () => {
+                    console.log("dxhoverend");
+                });
+            });
+
+            const data = [
+                { id: 1, text: "Item 1" },
+                { id: 2, text: "Item 2" },
+                { id: 3, text: "Item 3" },
+            ];
+        </script>
+    </body>
+</html>
