DataGrid - Native horizontal scrollbar is temporarily shown when clicking cells in batch/cell mode if focused row and column fixing features are enabled (T1310336)

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/focusOverlay.ts

@@ -119,3 +119,60 @@ test('Focus overlay should be displayed correctly if sticky columns are turned o
     columns[2].groupIndex = 1;
   },
 }));
+
+test('Native scrollbar should not be shown when the focus overlay is visible (T1310336)', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const firstGroupRow = dataGrid.getGroupRow(0);
+  const firstDataRow = dataGrid.getDataRow(1);
+  const secondDataCell = firstDataRow.getDataCell(2);
+  const hasHorizontalScroll = async () => {
+    const scrollableContainer = dataGrid.getScrollContainer();
+    const scrollWidth = await scrollableContainer.scrollWidth;
+    const clientWidth = await scrollableContainer.clientWidth;
+    return scrollWidth > clientWidth;
+  };
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await t.drag(secondDataCell.element, -2, 0, { offsetX: 1 });
+
+  // assert
+  await t
+    .expect(firstDataRow.isFocusedRow)
+    .ok()
+    .expect(dataGrid.getFocusOverlay().visible)
+    .notOk()
+    .expect(await hasHorizontalScroll())
+    .notOk();
+
+  // act
+  await t.pressKey('up');
+
+  // assert
+  await t
+    .expect(firstGroupRow.isFocusedRow)
+    .ok()
+    .expect(dataGrid.getFocusOverlay().visible)
+    .ok()
+    .expect(await hasHorizontalScroll())
+    .notOk();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(20, 5),
+  keyExpr: 'field_0',
+  height: 300,
+  focusedRowEnabled: true,
+  customizeColumns(columns) {
+    columns[0].fixed = true;
+    columns[1].groupIndex = 0;
+  },
+  scrolling: {
+    useNative: true,
+  },
+  editing: {
+    mode: 'cell',
+    allowUpdating: true,
+  },
+}));

packages/devextreme/js/__internal/grids/grid_core/editor_factory/m_editor_factory.ts

@@ -23,6 +23,7 @@ import type { ValidatingController } from '@ts/grids/grid_core/validating/m_vali
 
 import type { ColumnsController } from '../columns_controller/m_columns_controller';
 import type { EditingController } from '../editing/m_editing';
+import { isDataRow } from '../keyboard_navigation/utils';
 import type { ViewController } from '../m_modules';
 import modules from '../m_modules';
 import type { Module, ModuleType } from '../m_types';
@@ -233,13 +234,14 @@ export class EditorFactory extends ViewControllerWithMixin {
     } else if ($element.length) {
       // align "right bottom" for Mozilla
       const align = browser.mozilla ? 'right bottom' : 'left top';
+      const isDataRowElement = isDataRow($element);
       const isFocusedCellInvalid = $element.hasClass(this.addWidgetPrefix(CELL_INVALID_CLASS));
       const isFocusedCellModified = $element.hasClass(CELL_MODIFIED_CLASS) && !isFocusedCellInvalid;
       const $content = this.getFocusOverlayContainer($element);
       const focusOverlaySize = this.getFocusOverlaySize($element);
 
       this._$focusOverlay
-        .removeClass(DX_HIDDEN)
+        .toggleClass(DX_HIDDEN, isDataRowElement)
         .toggleClass(FOCUSED_CELL_INVALID_CLASS, isFocusedCellInvalid)
         .toggleClass(FOCUSED_CELL_MODIFIED_CLASS, isFocusedCellModified)
         .appendTo($content);

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts

@@ -726,9 +726,10 @@ const editorFactory = (Base: ModuleType<EditorFactory>) => class EditorFactorySt
         $element,
         this.addWidgetPrefix.bind(this),
       );
+      const isGroupRow = isGroupRowElement($element);
 
       return {
-        width: elementRect.right - elementRect.left + (isLastCell || isFixedCell ? 0 : 1),
+        width: elementRect.right - elementRect.left + (isLastCell || isFixedCell || isGroupRow ? 0 : 1),
         height: elementRect.bottom - elementRect.top,
       };
     }