Disable viewport scrolling on paste (#10630)

.changelogs/10630.json

@@ -0,0 +1,8 @@
+{
+  "issuesOrigin": "private",
+  "title": "Disabled table's viewport scrolling on data paste.",
+  "type": "changed",
+  "issueOrPR": 10630,
+  "breaking": false,
+  "framework": "none"
+}

handsontable/src/plugins/copyPaste/__tests__/paste.spec.js

@@ -515,6 +515,27 @@ describe('CopyPaste', () => {
       expect(getSelectedRangeLast().to.col).toBe(9);
     });
 
+    it('should paste data without scrolling the viewport', async() => {
+      handsontable({
+        data: createSpreadsheetData(50, 50),
+        width: 200,
+        height: 200,
+      });
+
+      selectCell(6, 2);
+      triggerPaste([
+        'test\ttest\ttest\ttest\ttest\ttest',
+        'test\ttest\ttest\ttest\ttest\ttest',
+        'test\ttest\ttest\ttest\ttest\ttest',
+        'test\ttest\ttest\ttest\ttest\ttest',
+        'test\ttest\ttest\ttest\ttest\ttest',
+        'test\ttest\ttest\ttest\ttest\ttest',
+      ].join('\n'));
+
+      expect(topOverlay().getScrollPosition()).toBe(0);
+      expect(inlineStartOverlay().getScrollPosition()).toBe(0);
+    });
+
     it('should sanitize pasted HTML', async() => {
       handsontable();
 

handsontable/src/plugins/copyPaste/copyPaste.js

@@ -180,6 +180,12 @@ export class CopyPaste extends BasePlugin {
     columnsLimit: () => this.columnsLimit,
     countColumnHeaders: () => this.hot.view.getColumnHeadersCount(),
   });
+  /**
+   * Flag that indicates if the viewport scroll should be prevented after pasting the data.
+   *
+   * @type {boolean}
+   */
+  #preventViewportScrollOnPaste = false;
   /**
    * Ranges of the cells coordinates, which should be used to copy/cut/paste actions.
    *
@@ -220,6 +226,7 @@ export class CopyPaste extends BasePlugin {
     }
 
     this.addHook('afterContextMenuDefaultOptions', options => this.#onAfterContextMenuDefaultOptions(options));
+    this.addHook('afterSelection', (...args) => this.#onAfterSelection(...args));
     this.addHook('afterSelectionEnd', () => this.#onAfterSelectionEnd());
 
     this.eventManager.addEventListener(this.hot.rootDocument, 'copy', (...args) => this.onCopy(...args));
@@ -561,6 +568,7 @@ export class CopyPaste extends BasePlugin {
       newRows.push(newRow);
     }
 
+    this.#preventViewportScrollOnPaste = true;
     this.hot.populateFromArray(startRow, startColumn, newRows, undefined, undefined, 'CopyPaste.paste', this.pasteMode);
 
     return [startRow, startColumn, lastVisualRow, lastVisualColumn];
@@ -768,6 +776,23 @@ export class CopyPaste extends BasePlugin {
     options.items.push(cutItem(this));
   }
 
+  /**
+   * Disables the viewport scroll after pasting the data.
+   *
+   * @param {number} fromRow Selection start row visual index.
+   * @param {number} fromColumn Selection start column visual index.
+   * @param {number} toRow Selection end row visual index.
+   * @param {number} toColumn Selection end column visual index.
+   * @param {object} preventScrolling Object with `value` property. If `true`, the viewport scroll will be prevented.
+   */
+  #onAfterSelection(fromRow, fromColumn, toRow, toColumn, preventScrolling) {
+    if (this.#preventViewportScrollOnPaste) {
+      preventScrolling.value = true;
+    }
+
+    this.#preventViewportScrollOnPaste = false;
+  }
+
   /**
    * Force focus on focusableElement after end of the selection.
    */