fix: unexpected drag on context menu (T1244185) (#3681)

* fix unexpected drag on context menu * bump GHA * fix my test * better test
DevExpress · Oct 9, 2024 · b856daa · b856daa
1 parent 826185c
commit b856daa
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 13 deletions.
diff --git a/.github/workflows/ci_tests.yml b/.github/workflows/ci_tests.yml
@@ -14,10 +14,10 @@ jobs:
     name: Build, Lint & Jest Test
     steps:
     - name: Get sources
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Use Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         node-version: '20'
 
@@ -40,7 +40,7 @@ jobs:
       run: 7z a -tzip -mx3 -mmt2 artifacts.zip packages
 
     - name: Upload build artifacts
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       with:
         name: devextreme-reactive-artifacts
         path: artifacts.zip
@@ -55,10 +55,10 @@ jobs:
     name: Test Cafe tests ${{ matrix.component }}
     steps:
     - name: Get sources
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Use Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         node-version: '20'
 
@@ -68,7 +68,7 @@ jobs:
         yarn --no-progress
 
     - name: Download artifacts
-      uses: actions/download-artifact@v2
+      uses: actions/download-artifact@v4
       with:
         name: devextreme-reactive-artifacts
 
@@ -84,10 +84,10 @@ jobs:
     name: Site
     steps:
     - name: Get sources
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Use Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         node-version: '20'
 
@@ -97,7 +97,7 @@ jobs:
         yarn --no-progress
 
     - name: Download artifacts
-      uses: actions/download-artifact@v2
+      uses: actions/download-artifact@v4
       with:
         name: devextreme-reactive-artifacts
 

diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
@@ -40,7 +40,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -54,7 +54,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -67,6 +67,6 @@ jobs:
     #   ./location_of_script_within_repo/buildscript.sh
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3
       with:
         category: "/language:${{matrix.language}}"
diff --git a/packages/dx-react-core/src/draggable.test.tsx b/packages/dx-react-core/src/draggable.test.tsx
@@ -156,6 +156,74 @@ describe('Draggable', () => {
         .toHaveBeenCalledWith({ x: 30, y: 30 });
     });
 
+    it('should fire the "onEnd" callback on contextmenu (case for macOS)', () => {
+      const onEnd = jest.fn();
+
+      tree = mount(
+        <Draggable
+          onEnd={onEnd}
+        >
+          <div />
+        </Draggable>,
+        { attachTo: rootNode },
+      );
+
+      const draggableNode = tree.find('div').getDOMNode() as HTMLElement;
+
+      dispatchEvent('mousedown', { clientX: 10, clientY: 10 }, draggableNode);
+      dispatchEvent('contextmenu', { clientX: 10, clientY: 10 });
+      dispatchEvent('mousemove', { clientX: 30, clientY: 30 });
+      dispatchEvent('mouseup', { clientX: 30, clientY: 30 });
+
+      expect(onEnd)
+        .not.toHaveBeenCalled();
+
+      dispatchEvent('mousedown', { clientX: 10, clientY: 10 }, draggableNode);
+      dispatchEvent('mousemove', { clientX: 30, clientY: 30 });
+      dispatchEvent('contextmenu', { clientX: 30, clientY: 30 });
+
+      expect(onEnd)
+        .toHaveBeenCalledTimes(1);
+      expect(onEnd)
+        .toHaveBeenCalledWith({ x: 30, y: 30 });
+    });
+
+    it('should fire the "onEnd" callback on contextmenu (case for Windows)', () => {
+      const onEnd = jest.fn();
+
+      tree = mount(
+        <Draggable
+          onEnd={onEnd}
+        >
+          <div />
+        </Draggable>,
+        { attachTo: rootNode },
+      );
+
+      const draggableNode = tree.find('div').getDOMNode() as HTMLElement;
+
+      const emulateCancelWithContextMenu = () => {
+        dispatchEvent('mousedown', { clientX: 10, clientY: 10 }, draggableNode);
+        dispatchEvent('mouseup', { clientX: 10, clientY: 10 });
+        dispatchEvent('contextmenu', { clientX: 10, clientY: 10 });
+      };
+
+      expect(emulateCancelWithContextMenu)
+        .not.toThrow();
+      expect(onEnd)
+        .not.toHaveBeenCalled();
+
+      dispatchEvent('mousedown', { clientX: 10, clientY: 10 }, draggableNode);
+      dispatchEvent('mousemove', { clientX: 30, clientY: 30 });
+      dispatchEvent('mouseup', { clientX: 30, clientY: 30 });
+      dispatchEvent('contextmenu', { clientX: 30, clientY: 30 });
+
+      expect(onEnd)
+        .toHaveBeenCalledTimes(1);
+      expect(onEnd)
+        .toHaveBeenCalledWith({ x: 30, y: 30 });
+    });
+
     it('should enable gesture cover while dragging', () => {
       tree = mount(
         <Draggable>

diff --git a/packages/dx-react-core/src/draggable.tsx b/packages/dx-react-core/src/draggable.tsx
@@ -119,6 +119,7 @@ export class Draggable extends React.PureComponent<DraggableProps> {
         this.saveEvent(e, true);
         this.mouseStrategy.move(e);
         break;
+      case 'contextmenu':
       case 'mouseup':
         this.eventParams = null;
         this.mouseStrategy.end(e);

diff --git a/packages/dx-react-core/src/draggable/shared-events.ts b/packages/dx-react-core/src/draggable/shared-events.ts
@@ -8,7 +8,7 @@ export const getSharedEventEmitter = () => {
   if (!eventEmitter) {
     eventEmitter = new EventEmitter();
 
-    ['mousemove', 'mouseup', 'touchmove', 'touchend', 'touchcancel']
+    ['mousemove', 'mouseup', 'touchmove', 'touchend', 'touchcancel', 'contextmenu']
       .forEach(name => window.addEventListener(
         name, e => eventEmitter.emit([name, e]), { passive: false },
       ));