DataGrid - Console displays an error when Tab navigation is used after changing the cell value (T1210910) (#27350)

Author: pomahtri

.github/actions/pin-browsers/action.yml

@@ -4,7 +4,7 @@ description: "Install and setup Chrome and Firefox"
 inputs:
   chrome-version:
     description: "Chrome version to install"
-    default: "112.0.5615.165-1"
+    default: "121.0.6167.160-1"
   firefox-version:
     description: "Firefox version to install"
     default: "latest"

.github/workflows/devextreme_npm_tests.yml

@@ -220,13 +220,13 @@ jobs:
         REMOTE_BRANCH=${{github.event.pull_request.head.ref}}
 
         if [ "$(git ls-remote --heads $REMOTE_URL $REMOTE_BRANCH | wc -l)" == "1" ]; then
-          git clone -b $REMOTE_BRANCH $REMOTE_URL ./devextreme-demos
+          git clone -b $REMOTE_BRANCH --depth 1 $REMOTE_URL  ./devextreme-demos
         fi
 
     - name: Clone devextreme-demos repo
       run: |
         BASE_BRANCH=$(node -p -e "require('./package.json').version.slice(0, 4).replace('.', '_')")
-        test -d ./devextreme-demos || git clone -b $BASE_BRANCH https://github.com/devexpress/devextreme-demos ./devextreme-demos
+        test -d ./devextreme-demos || git clone -b $BASE_BRANCH --depth 1 https://github.com/devexpress/devextreme-demos ./devextreme-demos
 
     - name: Download artifacts
       uses: actions/download-artifact@v3

js/__internal/grids/grid_core/validating/m_validating.ts

@@ -1362,6 +1362,12 @@ export const validatingModule = {
               const value = validator.option('adapter').getValue();
               if (cellValueShouldBeValidated(value, rowOptions) || validatingController._rowIsValidated(change)) {
                 editingController.waitForDeferredOperations().done(() => {
+                  // NOTE: after waiting for deferred operations another rerender may occur.
+                  // In this case this validating is outdated
+                  const isDetached = !this._rowsView.isElementInside($element);
+                  if (isDetached) {
+                    return;
+                  }
                   when(validatingController.validateCell(validator)).done((result) => {
                     validationResult = result;
                     const { column } = validationResult.validator.option('dataGetter')();

js/__internal/grids/grid_core/views/m_rows_view.ts

@@ -1252,6 +1252,12 @@ export class RowsView extends ColumnsView {
   setScrollerSpacing() { }
 
   _restoreErrorRow() { }
+
+  public isElementInside($element) {
+    const $rowsViewElement = $element.closest(`.${this.addWidgetPrefix(ROWS_VIEW_CLASS)}`);
+
+    return $rowsViewElement.is(this.element());
+  }
 }
 
 export const rowsModule = {

testing/testcafe/tests/dataGrid/focus/focusedRow/focusedRow.ts

@@ -757,7 +757,7 @@ test('Scrolling should not occured after deleting via push API if scrolling.mode
   });
 });
 
-test('Scroll should not change focused row if focus method is called inside onContentReady (T1047794)', async (t) => {
+test.skip('Scroll should not change focused row if focus method is called inside onContentReady (T1047794)', async (t) => {
   const dataGrid = new DataGrid('#container');
 
   await t

testing/testcafe/tests/dataGrid/keyboardNavigation/etalons/cell-focus-showEditorAlways-T1196539.png

@@ -0,0 +1,51 @@
+import url from '../../../helpers/getPageUrl';
+import createWidget from '../../../helpers/createWidget';
+import DataGrid from '../../../model/dataGrid';
+
+fixture.disablePageReloads`Validation`
+  .page(url(__dirname, '../../container.html'));
+
+[true, false].forEach((repaintChangesOnly) => {
+  test(`Navigation with tab without saving should not throw an error (repaintChangesOnly: ${repaintChangesOnly})`, async (t) => {
+    const grid = new DataGrid('#container');
+
+    await t.click(grid.getDataCell(0, 0).element);
+
+    const editor = grid.getDataCell(0, 0).getEditor();
+
+    await t.typeText(editor.element, '123');
+    await t.pressKey('tab');
+
+    await t.expect(true).ok('no errors');
+  }).before(() => createWidget('dxDataGrid', {
+    dataSource: [{
+      id: 1,
+      col2: 30,
+      col3: 240,
+    },
+    {
+      id: 2,
+      col2: 15,
+      col3: 120,
+    }],
+    keyExpr: 'id',
+    repaintChangesOnly,
+    columnAutoWidth: true,
+    showBorders: true,
+    paging: {
+      enabled: false,
+    },
+    editing: {
+      mode: 'cell',
+      allowUpdating: true,
+      allowAdding: true,
+    },
+    columns: [{
+      dataField: 'col2',
+      validationRules: [{ type: 'required' }],
+    }, {
+      dataField: 'col3',
+      validationRules: [{ type: 'required' }],
+    }],
+  }));
+});