Use different selector with server side pagination enabled to determi…

…ne if a row is visible
mui · Aug 19, 2024 · 4ba6f2b · 4ba6f2b
1 parent 09899fb
commit 4ba6f2b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git a/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts b/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts
@@ -209,11 +209,13 @@ function defaultPasteResolver({
   apiRef,
   updateCell,
   pagination,
+  paginationMode,
 }: {
   pastedData: string[][];
   apiRef: React.MutableRefObject<GridApiPremium>;
   updateCell: CellValueUpdater['updateCell'];
   pagination: DataGridPremiumProcessedProps['pagination'];
+  paginationMode: DataGridPremiumProcessedProps['paginationMode'];
 }) {
   const isSingleValuePasted = pastedData.length === 1 && pastedData[0].length === 1;
 
@@ -297,9 +299,10 @@ function defaultPasteResolver({
 
   const selectedRowId = selectedCell.id;
   const selectedRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(selectedRowId);
-  const visibleRowIds = pagination
-    ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef)
-    : gridExpandedSortedRowIdsSelector(apiRef);
+  const visibleRowIds =
+    pagination && paginationMode === 'client'
+      ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef)
+      : gridExpandedSortedRowIdsSelector(apiRef);
 
   const selectedFieldIndex = visibleColumnFields.indexOf(selectedCell.field);
   pastedData.forEach((rowData, index) => {
@@ -342,7 +345,7 @@ export const useGridClipboardImport = (
 
   const splitClipboardPastedText = props.splitClipboardPastedText;
 
-  const { pagination, onBeforeClipboardPasteStart } = props;
+  const { pagination, paginationMode, onBeforeClipboardPasteStart } = props;
 
   const handlePaste = React.useCallback<GridEventListener<'cellKeyDown'>>(
     async (params, event) => {
@@ -403,6 +406,7 @@ export const useGridClipboardImport = (
           cellUpdater.updateCell(...args);
         },
         pagination,
+        paginationMode,
       });
 
       cellUpdater.applyUpdates();
@@ -416,6 +420,7 @@ export const useGridClipboardImport = (
       rootEl,
       splitClipboardPastedText,
       pagination,
+      paginationMode,
       onBeforeClipboardPasteStart,
       logger,
     ],

diff --git a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
@@ -237,6 +237,48 @@ describe('<DataGridPremium /> - Clipboard', () => {
         expect(getCell(2, 2)).to.have.text(clipboardData);
       });
 
+      it('should paste into cells on the current page when pagination is in "server" mode', async () => {
+        const rowLength = 4;
+
+        const { setProps } = render(
+          <Test
+            rowLength={rowLength}
+            pagination
+            paginationModel={{ pageSize: 2, page: 0 }}
+            paginationMode="server"
+            pageSizeOptions={[2]}
+            rowCount={rowLength}
+            editMode="cell"
+          />,
+        );
+
+        const clipboardData = '12';
+        const cell = getCell(3, 1); // cell in the first row on the next page
+
+        expect(cell).not.to.have.text(clipboardData);
+
+        cell.focus();
+        userEvent.mousePress(cell);
+        paste(cell, clipboardData);
+
+        // no update
+        await waitFor(() => {
+          expect(getCell(3, 1)).not.to.have.text(clipboardData);
+        });
+
+        // go to the next page
+        setProps({ paginationModel: { pageSize: 2, page: 1 } });
+
+        cell.focus();
+        userEvent.mousePress(cell);
+        paste(cell, clipboardData);
+
+        // updated
+        await waitFor(() => {
+          expect(getCell(3, 1)).to.have.text(clipboardData);
+        });
+      });
+
       it('should not paste values outside of the selected cells range', async () => {
         render(<Test rowLength={5} colLength={5} />);