From 4e99fa4ab29562bbb473458f6bfa132d7559e9a5 Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskii <andrew@mui.com>
Date: Wed, 26 Jan 2022 20:18:55 +0100
Subject: [PATCH] [DataGrid] Fix Alt+c being ignored on some systems (#3660)

---
 .../data-grid/accessibility/accessibility.md  |  5 ++++-
 .../features/clipboard/useGridClipboard.ts    |  5 ++++-
 .../src/tests/clipboard.DataGridPro.test.tsx  | 20 +++++++++++--------
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/docs/src/pages/components/data-grid/accessibility/accessibility.md b/docs/src/pages/components/data-grid/accessibility/accessibility.md
index 96cd7b33c956..c1f7c39d9be0 100644
--- a/docs/src/pages/components/data-grid/accessibility/accessibility.md
+++ b/docs/src/pages/components/data-grid/accessibility/accessibility.md
@@ -90,7 +90,10 @@ Use the arrow keys to move the focus.
 ### Key assignment conventions
 
 The above key assignments are for Windows and Linux.
-On macOS, replace <kbd class="key">CTRL</kbd> with <kbd class="key">⌘ Command</kbd>.
+On macOS:
+
+- replace <kbd class="key">CTRL</kbd> with <kbd class="key">⌘ Command</kbd>
+- replace <kbd class="key">ALT</kbd> with <kbd class="key">⌥ Option</kbd>
 
 ## API
 
diff --git a/packages/grid/_modules_/grid/hooks/features/clipboard/useGridClipboard.ts b/packages/grid/_modules_/grid/hooks/features/clipboard/useGridClipboard.ts
index e51df818cc3e..38204887f878 100644
--- a/packages/grid/_modules_/grid/hooks/features/clipboard/useGridClipboard.ts
+++ b/packages/grid/_modules_/grid/hooks/features/clipboard/useGridClipboard.ts
@@ -55,7 +55,10 @@ export const useGridClipboard = (apiRef: GridApiRef): void => {
   const handleKeydown = React.useCallback(
     (event: KeyboardEvent) => {
       const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
-      if (event.key.toLowerCase() !== 'c' || !isModifierKeyPressed) {
+      // event.key === 'c' is not enough as alt+c can lead to ©, ç, or other characters on macOS.
+      // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
+      // be wrong with a Dvorak keyboard (as if pressing J).
+      if (String.fromCharCode(event.keyCode) !== 'C' || !isModifierKeyPressed) {
         return;
       }
 
diff --git a/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx
index 11573ba274d2..1ffa13b3728c 100644
--- a/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx
@@ -49,13 +49,6 @@ describe('<DataGridPro /> - Clipboard', () => {
   describe('copySelectedRowsToClipboard', () => {
     let writeText;
 
-    before(function beforeHook() {
-      if (!isJSDOM) {
-        // Needs permission to read the clipboard
-        this.skip();
-      }
-    });
-
     beforeEach(function beforeEachHook() {
       writeText = stub().resolves();
 
@@ -92,9 +85,20 @@ describe('<DataGridPro /> - Clipboard', () => {
         const cell = getCell(0, 0);
         fireEvent.mouseUp(cell);
         fireEvent.click(cell);
-        fireEvent.keyDown(cell, { key: 'c', [key]: true });
+        fireEvent.keyDown(cell, { key: 'c', keyCode: 67, [key]: true });
         expect(writeText.firstCall.args[0]).to.equal(['0\tNike', '1\tAdidas'].join('\r\n'));
       });
     });
+
+    it(`should copy the selected rows and headers to the clipboard when Alt + C is pressed`, () => {
+      render(<Test />);
+      apiRef.current.selectRows([0, 1]);
+      const cell = getCell(0, 0);
+      fireEvent.mouseUp(cell);
+      fireEvent.click(cell);
+      fireEvent.keyDown(cell, { key: 'c', keyCode: 67, altKey: true });
+      expect(writeText.callCount).to.equal(1, "writeText wasn't called");
+      expect(writeText.firstCall.args[0]).to.equal(['id\tBrand', '0\tNike'].join('\r\n'));
+    });
   });
 });