DataGrid - Fix the browser scrolling back to the grid when data is updated (T1310557) (#33168)

Author: markallenramirez

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts

@@ -1743,7 +1743,7 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
     gridCoreUtils.focusAndSelectElement(this, $focusedElement);
   }
 
-  public _focus($cell, disableFocus?, skipFocusEvent?) {
+  public _focus($cell: dxElementWrapper, disableFocus?: boolean, skipFocusEvent?: boolean, preventScroll?: boolean) {
     const $row = $cell && !$cell.hasClass(ROW_CLASS)
       ? $cell.closest(`.${ROW_CLASS}`)
       : $cell;
@@ -1795,8 +1795,12 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
       });
       if (!skipFocusEvent) {
         this._applyTabIndexToElement($focusElement);
-        // @ts-expect-error
-        eventsEngine.trigger($focusElement, 'focus');
+        if (preventScroll) {
+          $focusElement.get(0)?.focus({ preventScroll });
+        } else {
+          // @ts-expect-error
+          eventsEngine.trigger($focusElement, 'focus');
+        }
       }
       if (disableFocus) {
         $focusElement.addClass(CELL_FOCUS_DISABLED_CLASS);
@@ -1809,7 +1813,7 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
     }
   }
 
-  public _updateFocus(isRenderView?, skipFocusEvent = false) {
+  public _updateFocus(isRenderView: boolean, skipFocusEvent = false) {
     this._updateFocusTimeout = setTimeout(() => {
       if (this._needFocusEditingCell()) {
         this._editingController._focusEditingCell();
@@ -1848,12 +1852,12 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
                 );
                 return;
               }
-              !isFocusedElementDefined && this._focus($cell, false, skipFocusEvent);
+              !isFocusedElementDefined && this._focus($cell, false, skipFocusEvent, isRenderView);
             } else if (
               !isFocusedElementDefined
               && (this._isNeedFocus || this._isHiddenFocus)
             ) {
-              this._focus($cell, this._isHiddenFocus, skipFocusEvent);
+              this._focus($cell, this._isHiddenFocus, skipFocusEvent, isRenderView);
             }
             if (isEditing && !column?.showEditorAlways) {
               this._focusInteractiveElement.bind(this)($cell);
@@ -1953,7 +1957,7 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
       that.setFocusedCellPosition(rowIndex, columnIndex);
     }
 
-    isUpArrow && that._updateFocus();
+    isUpArrow && that._updateFocus(false);
   }
 
   // #endregion Focusing
@@ -3128,7 +3132,7 @@ const editing = (Base: ModuleType<EditingController>) => class EditingController
 
   protected _processCanceledEditingCell() {
     this.closeEditCell().done(() => {
-      this._keyboardNavigationController._updateFocus();
+      this._keyboardNavigationController._updateFocus(false);
     });
   }
 
@@ -3145,7 +3149,7 @@ const editing = (Base: ModuleType<EditingController>) => class EditingController
     const isFilterCell = !!$focusedElement.closest(`.${this.addWidgetPrefix(FILTER_ROW_CLASS)}`).length;
 
     if (!isFilterCell) {
-      keyboardNavigation._updateFocus();
+      keyboardNavigation._updateFocus(false);
     }
 
     return result;

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/scrollable_a11y.ts

@@ -61,8 +61,13 @@ export const keyboardNavigationScrollableA11yExtender = (Base: ModuleType<Keyboa
     super.renderCompleted(e);
   }
 
-  public _focus($cell: any, disableFocus?: any, skipFocusEvent?: any): void {
-    super._focus($cell, disableFocus, skipFocusEvent);
+  public _focus(
+    $cell: dxElementWrapper,
+    disableFocus?: boolean,
+    skipFocusEvent?: boolean,
+    preventScroll?: boolean,
+  ): void {
+    super._focus($cell, disableFocus, skipFocusEvent, preventScroll);
 
     this.makeScrollableFocusableIfNeed();
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.integration.tests.js

@@ -4318,6 +4318,90 @@ QUnit.module('View\'s focus', {
         assert.equal(this.dataGrid.option('focusedRowKey'), 2, 'row key is changed');
         assert.ok($(this.dataGrid.getRowElement(1)).hasClass('dx-row-focused'), 'second row is focused');
     });
+
+    // T1310557
+    QUnit.testInActiveWindow('Browser should not scroll back to the grid when a focused cell is updated or rerendered', function(assert) {
+        // arrange
+        const dataGrid = createDataGrid({
+            dataSource: {
+                store: new ArrayStore({
+                    key: 'id',
+                    data: [{ id: 1, name: 'test1' }],
+                }),
+                pushAggregationTimeout: 0,
+            },
+        });
+        this.clock.tick(10);
+
+        try {
+            $('body').css('height', 2000);
+            window.scrollTo(0, 0);
+
+            const keyboardController = dataGrid.getController('keyboardNavigation');
+            const $firstCell = $(dataGrid.getCellElement(0, 0));
+            const scrollPosition = 300;
+
+            // assert
+            assert.strictEqual(window.pageYOffset, 0, 'document scroll is at the top');
+
+            // act
+            $firstCell.trigger(CLICK_EVENT);
+            this.clock.tick(10);
+
+            keyboardController.keyDownHandler({
+                key: 'Tab',
+                keyName: 'tab',
+                originalEvent: $.Event('keydown', { target: $firstCell.get(0) }),
+            });
+            this.clock.tick(10);
+
+            // assert
+            assert.ok($(dataGrid.getCellElement(0, 1)).hasClass('dx-focused'), 'second cell is focused');
+
+            // act
+            window.scrollTo(0, scrollPosition);
+
+            // assert
+            assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is changed');
+
+            // act
+            dataGrid.getDataSource().store().push([{ type: 'update', key: 1, data: { name: 'updated' } }]);
+            this.clock.tick(10);
+
+            // assert
+            assert.strictEqual($(dataGrid.getCellElement(0, 1)).text(), 'updated', 'second cell text is updated');
+            assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after push update');
+
+            // act
+            dataGrid.refresh();
+            this.clock.tick(10);
+
+            // assert
+            assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after refresh');
+
+            // act
+            dataGrid.repaint();
+            this.clock.tick(10);
+
+            // assert
+            assert.strictEqual(window.pageYOffset, scrollPosition, 'document scroll is preserved after repaint');
+
+            // act
+            keyboardController.keyDownHandler({
+                key: 'ArrowLeft',
+                keyName: 'leftArrow',
+                originalEvent: $.Event('keydown', { target: $(dataGrid.getCellElement(0, 1)).get(0) }),
+            });
+            this.clock.tick(10);
+
+            // assert
+            assert.ok($(dataGrid.getCellElement(0, 0)).hasClass('dx-focused'), 'first cell is focused');
+            assert.strictEqual(window.pageYOffset, 0, 'document scroll is changed after keyboard navigation');
+        } finally {
+            $('body').css('height', '');
+            window.scrollTo(0, 0);
+        }
+    });
 });
 
 QUnit.module('API methods', baseModuleConfig, () => {