fix: stop grid column reordering on contextmenu event (#5430) (#5431)

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>

Author: vaadin-bot

packages/grid/src/vaadin-grid-column-reordering-mixin.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { updateColumnOrders } from './vaadin-grid-helpers.js';
 
@@ -51,6 +52,14 @@ export const ColumnReorderingMixin = (superClass) =>
     _onContextMenu(e) {
       if (this.hasAttribute('reordering')) {
         e.preventDefault();
+
+        // A contextmenu event is fired on mobile Chrome on long-press
+        // (which should start reordering). Don't end the reorder on touch devices.
+        if (!isTouch) {
+          // Context menu cancels the track gesture on desktop without firing an end event.
+          // End the reorder manually.
+          this._onTrackEnd();
+        }
       }
     }
 

packages/grid/test/column-reordering.test.js

@@ -4,6 +4,7 @@ import sinon from 'sinon';
 import '@vaadin/polymer-legacy-adapter/template-renderer.js';
 import '../vaadin-grid.js';
 import '../vaadin-grid-column-group.js';
+import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import {
   dragAndDropOver,
   dragOver,
@@ -177,6 +178,16 @@ describe('reordering simple grid', () => {
     expect(e.defaultPrevented).to.be.false;
   });
 
+  it('should cancel reorder on contextmenu on desktop', () => {
+    dragStart(headerContent[0]);
+
+    const e = new CustomEvent('contextmenu', { cancelable: true, bubbles: true });
+    headerContent[0].dispatchEvent(e);
+
+    const cell = getCellByCellContent(headerContent[0]);
+    expect(cell.getAttribute('reorder-status')).to.equal(!isTouch ? '' : 'dragging');
+  });
+
   describe('touch gesture delay', () => {
     let clock;