From 250853741b947e766f18ac098131dfd217b5becc Mon Sep 17 00:00:00 2001
From: SergeyAlexeev <SergeyAlexeev@users.noreply.github.com>
Date: Fri, 9 Jun 2017 15:02:11 +0300
Subject: [PATCH] fix(react-grid): Cancel sorting by using the Ctrl key in
 Material UI (#129)

---
 .../src/templates/group-panel-cell.jsx         |  6 +++++-
 .../src/templates/group-panel-cell.test.jsx    | 18 ++++++++++++++++++
 .../src/templates/table-header-cell.jsx        |  6 +++++-
 .../src/templates/table-header-cell.test.jsx   | 18 ++++++++++++++++++
 4 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx
index d1a3c1bef9..a79e66dc18 100644
--- a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx
@@ -30,7 +30,11 @@ const GroupPanelCellBase = ({
     <span
       onClick={(e) => {
         if (!allowSorting) return;
-        changeSortingDirection({ keepOther: e.shiftKey });
+        const cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
+        changeSortingDirection({
+          keepOther: e.shiftKey || cancelSortingRelatedKey,
+          cancel: cancelSortingRelatedKey,
+        });
       }}
     >
       <TableSortLabel
diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx
index 70525fa2d6..8e5898dffc 100644
--- a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx
@@ -14,4 +14,22 @@ describe('GroupPanelCell', () => {
 
     expect(tree.find('TableSortLabel').text()).toBe('Test');
   });
+
+  test('should cancel sorting by using the Ctrl key', () => {
+    const changeSortingDirection = jest.fn();
+    const tree = mountWithStyles(
+      <GroupPanelCell
+        column={{
+          name: 'Test',
+        }}
+        changeSortingDirection={changeSortingDirection}
+        allowSorting
+      />,
+    );
+
+    tree.find('span > span > span').simulate('click', { ctrlKey: true });
+
+    expect(changeSortingDirection.mock.calls).toHaveLength(1);
+    expect(changeSortingDirection.mock.calls[0][0].cancel).toBeTruthy();
+  });
 });
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx
index 9138ccaee6..1724daebff 100644
--- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx
@@ -140,7 +140,11 @@ export const TableHeaderCellBase = ({
       onClick={(e) => {
         if (!allowSorting) return;
         e.stopPropagation();
-        changeSortingDirection({ keepOther: e.shiftKey });
+        const cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
+        changeSortingDirection({
+          keepOther: e.shiftKey || cancelSortingRelatedKey,
+          cancel: cancelSortingRelatedKey,
+        });
       }}
       style={style}
       className={tableCellClasses}
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx
index 0ffb4dff3c..50ecbfd521 100644
--- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx
@@ -24,4 +24,22 @@ describe('TableHeaderCell', () => {
 
     expect(tree.find('div').text()).toBe('Test');
   });
+
+  test('should cancel sorting by using the Ctrl key', () => {
+    const changeSortingDirection = jest.fn();
+    const tree = mountWithStyles(
+      <TableHeaderCell
+        column={{
+          name: 'Test',
+        }}
+        changeSortingDirection={changeSortingDirection}
+        allowSorting
+      />,
+    );
+
+    tree.simulate('click', { ctrlKey: true });
+
+    expect(changeSortingDirection.mock.calls).toHaveLength(1);
+    expect(changeSortingDirection.mock.calls[0][0].cancel).toBeTruthy();
+  });
 });