Fix: CellExternalCopyManager plugin restores focus on paste (#1011)

* fix: SlickCellExternalCopyManager plugin restores focus on paste

Author: PierreYvesR

cypress/e2e/example-excel-compatible-spreadsheet.cy.ts

@@ -0,0 +1,31 @@
+describe('Example - Excel-compatible spreadsheet and Cell Selection', { retries: 0 }, () => {
+  const cellHeight = 25;
+
+  it('should load Example', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/examples/example-excel-compatible-spreadsheet.html`);
+  });
+
+  it('should click on cell B2, copy value, ArrowDown, paste value, ArrowRight, and expect to be in column C', () => {
+    cy.getCell(2, 2, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+      .as('cell_B2')
+      .click();
+
+    cy.get(".slick-cell.active")
+      .realPress(["Control", "C"]);
+
+    cy.get(".slick-cell.active")
+      .type('{downarrow}');
+
+    cy.get(".slick-cell.active")
+      .realPress(["Control", "V"]);
+
+    cy.get(".slick-cell.active")
+      .type('{rightarrow}');
+
+    cy.get('#myGrid .slick-cell.l3.r3.selected')
+      .should('have.length', 1);
+
+    cy.getCell(3, 2, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+      .should('have.text', '3');
+  });
+});

cypress/support/commands.ts

@@ -24,6 +24,7 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 import '@4tw/cypress-drag-drop';
+import "cypress-real-events";
 import { convertPosition } from './common';
 
 declare global {

cypress/tsconfig.json

@@ -4,7 +4,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "lib": ["es5", "dom"],
-    "types": ["@4tw/cypress-drag-drop", "cypress", "node"],
+    "types": ["@4tw/cypress-drag-drop", "cypress", "node", "cypress-real-events"],
     "jsx": "preserve"
   },
   "include": ["**/*.ts"]

package-lock.json

@@ -80,6 +80,7 @@
     "cssnano": "^6.1.2",
     "cssnano-preset-lite": "^3.1.0",
     "cypress": "^13.7.2",
+    "cypress-real-events": "^1.12.0",
     "dotenv": "^16.4.5",
     "esbuild": "^0.20.2",
     "eslint": "^8.57.0",

package.json

@@ -449,8 +449,13 @@ export class SlickCellExternalCopyManager implements SlickPlugin {
         (e.which === this.keyCodes.V && (e.ctrlKey || e.metaKey) && !e.shiftKey)
         || (e.which === this.keyCodes.INSERT && e.shiftKey && !e.ctrlKey)
       )) {    // CTRL+V or Shift+INS
+        const focusEl = document.activeElement as HTMLElement;
         const ta = this._createTextBox('');
-        setTimeout(() => this._decodeTabularData(this._grid, ta), 100);
+        setTimeout(() => {
+            this._decodeTabularData(this._grid, ta);
+            // restore focus when possible
+            focusEl?.focus();
+        }, this._options?.clipboardPasteDelay ?? CLIPBOARD_PASTE_DELAY);
         return false;
       }
     }