[DataGrid] Do not escape double quotes when copying to clipboard (#12734

)
mui · Apr 10, 2024 · 4db77b1 · 4db77b1
1 parent bd7ef17
commit 4db77b1
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 19 deletions.
diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
@@ -565,7 +565,7 @@ export const useGridCellSelection = (
             cellData = serializeCellValue(cellParams, {
               delimiterCharacter: clipboardCopyCellDelimiter,
               ignoreValueFormatter,
-              shouldAppendQuotes: true,
+              shouldAppendQuotes: false,
             });
           } else {
             cellData = '';

diff --git a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
@@ -134,6 +134,30 @@ describe('<DataGridPremium /> - Clipboard', () => {
       fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true });
       expect(writeText.lastCall.firstArg).to.equal(['Adidas', 'Nike', 'Puma'].join('\r\n'));
     });
+
+    it('should not escape double quotes when copying multiple cells to clipboard', () => {
+      render(
+        <DataGridPremium
+          columns={[{ field: 'value' }]}
+          rows={[
+            { id: 0, value: '1 " 1' },
+            { id: 1, value: '2' },
+          ]}
+          unstable_cellSelection
+          disableRowSelectionOnClick
+        />,
+      );
+
+      const cell = getCell(0, 0);
+      cell.focus();
+      userEvent.mousePress(cell);
+
+      fireEvent.keyDown(cell, { key: 'Ctrl' });
+      fireEvent.click(getCell(1, 0), { ctrlKey: true });
+
+      fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true });
+      expect(writeText.lastCall.firstArg).to.equal(['1 " 1', '2'].join('\r\n'));
+    });
   });
 
   describe('paste', () => {

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
@@ -28,26 +28,17 @@ describe('<DataGridPro /> - Clipboard', () => {
           apiRef={apiRef}
           columns={columns}
           rows={[
-            {
-              id: 0,
-              brand: 'Nike',
-            },
-            {
-              id: 1,
-              brand: 'Adidas',
-            },
-            {
-              id: 2,
-              brand: 'Puma',
-            },
+            { id: 0, brand: 'Nike' },
+            { id: 1, brand: 'Adidas' },
+            { id: 2, brand: 'Puma' },
           ]}
           {...props}
         />
       </div>
     );
   }
 
-  describe('copySelectedRowsToClipboard', () => {
+  describe('copy to clipboard', () => {
     let writeText: SinonStub;
     const originalClipboard = navigator.clipboard;
 
@@ -74,5 +65,41 @@ describe('<DataGridPro /> - Clipboard', () => {
         expect(writeText.firstCall.args[0]).to.equal(['0\tNike', '1\tAdidas'].join('\r\n'));
       });
     });
+
+    it('should not escape double quotes when copying a single cell to clipboard', () => {
+      render(
+        <Test
+          columns={[{ field: 'value' }]}
+          rows={[{ id: 0, value: '1 " 1' }]}
+          disableRowSelectionOnClick
+        />,
+      );
+
+      const cell = getCell(0, 0);
+      cell.focus();
+      userEvent.mousePress(cell);
+
+      fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true });
+      expect(writeText.lastCall.firstArg).to.equal('1 " 1');
+    });
+
+    it('should not escape double quotes when copying rows to clipboard', () => {
+      render(
+        <Test
+          columns={[{ field: 'value' }]}
+          rows={[
+            { id: 0, value: '1 " 1' },
+            { id: 1, value: '2' },
+          ]}
+          disableRowSelectionOnClick
+        />,
+      );
+
+      act(() => apiRef.current.selectRows([0, 1]));
+      const cell = getCell(0, 0);
+      userEvent.mousePress(cell);
+      fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true });
+      expect(writeText.firstCall.args[0]).to.equal(['1 " 1', '2'].join('\r\n'));
+    });
   });
 });
diff --git a/packages/grid/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts b/packages/grid/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts
@@ -7,12 +7,13 @@ import { buildWarning } from '../../../../utils/warning';
 
 function sanitizeCellValue(value: any, delimiterCharacter: string, shouldAppendQuotes: boolean) {
   if (typeof value === 'string') {
-    // Make sure value containing delimiter or line break won't be split into multiple rows
-    if ([delimiterCharacter, '\n', '\r', '"'].some((delimiter) => value.includes(delimiter))) {
-      if (shouldAppendQuotes) {
-        return `"${value.replace(/"/g, '""')}"`;
+    if (shouldAppendQuotes) {
+      const escapedValue = value.replace(/"/g, '""');
+      // Make sure value containing delimiter or line break won't be split into multiple rows
+      if ([delimiterCharacter, '\n', '\r', '"'].some((delimiter) => value.includes(delimiter))) {
+        return `"${escapedValue}"`;
       }
-      return `${value.replace(/"/g, '""')}`;
+      return escapedValue;
     }
 
     return value;