fix(react-grid): Cancel sorting by using the Ctrl key in Material UI (#…

…129)
DevExpress · Jun 9, 2017 · 2508537 · 2508537
1 parent 9d3a119
commit 2508537
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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();
+  });
 });