diff --git a/e2e/testcafe-devextreme/helpers/domUtils.ts b/e2e/testcafe-devextreme/helpers/domUtils.ts index b0f13add13e0..085e8c0b183e 100644 --- a/e2e/testcafe-devextreme/helpers/domUtils.ts +++ b/e2e/testcafe-devextreme/helpers/domUtils.ts @@ -136,3 +136,9 @@ export const addFocusableElementBefore = ClientFunction(( target?.parentElement?.insertBefore(button, target); return button.id; }); + +export const hasHorizontalScroll = async (container: Selector): Promise => { + const scrollWidth = await container.scrollWidth; + const clientWidth = await container.clientWidth; + return scrollWidth > clientWidth; +}; diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/focusOverlay.ts b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/focusOverlay.ts index 37651ed3c901..f29cf4c125bf 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/focusOverlay.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/focusOverlay.ts @@ -1,6 +1,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import DataGrid from 'devextreme-testcafe-models/dataGrid'; import { createWidget } from '../../../../helpers/createWidget'; +import { hasHorizontalScroll } from '../../../../helpers/domUtils'; import url from '../../../../helpers/getPageUrl'; import { getData } from '../../helpers/generateDataSourceData'; import { testScreenshot } from '../../../../helpers/themeUtils'; @@ -119,3 +120,55 @@ 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 scrollableContainer = dataGrid.getScrollContainer(); + const firstGroupRow = dataGrid.getGroupRow(0); + const firstDataRow = dataGrid.getDataRow(1); + const secondDataCell = firstDataRow.getDataCell(2); + + // 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(scrollableContainer)) + .notOk(); + + // act + await t.pressKey('up'); + + // assert + await t + .expect(firstGroupRow.isFocusedRow) + .ok() + .expect(dataGrid.getFocusOverlay().visible) + .ok() + .expect(await hasHorizontalScroll(scrollableContainer)) + .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, + }, +})); diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/workSpace.ts b/e2e/testcafe-devextreme/tests/scheduler/common/workSpace.ts index e7363c274b05..e013db874fdc 100644 --- a/e2e/testcafe-devextreme/tests/scheduler/common/workSpace.ts +++ b/e2e/testcafe-devextreme/tests/scheduler/common/workSpace.ts @@ -5,7 +5,7 @@ import Scheduler, { CLASS } from 'devextreme-testcafe-models/scheduler'; import { extend } from 'devextreme/core/utils/extend'; import { createWidget } from '../../../helpers/createWidget'; import url from '../../../helpers/getPageUrl'; -import { insertStylesheetRulesToPage } from '../../../helpers/domUtils'; +import { hasHorizontalScroll, insertStylesheetRulesToPage } from '../../../helpers/domUtils'; import { testScreenshot } from '../../../helpers/themeUtils'; fixture.disablePageReloads`Scheduler: Workspace` @@ -285,13 +285,9 @@ test('Check cell active state', async (t) => { ].forEach((viewName) => { test(`[T1225772]: should not have the horizontal scroll in horizontal views when the crossScrollingEnabled: true (view:${viewName})`, async (t) => { const scheduler = new Scheduler('#container'); + const hasHScroll = await hasHorizontalScroll(scheduler.dateTableScrollableContainer); - const scrollableContainer = scheduler.dateTableScrollableContainer; - const scrollWidth = await scrollableContainer.scrollWidth; - const clientWidth = await scrollableContainer.clientWidth; - const hasHorizontalScroll = scrollWidth > clientWidth; - - await t.expect(hasHorizontalScroll).notOk('workspace has the horizontal scrollbar'); + await t.expect(hasHScroll).notOk('workspace has the horizontal scrollbar'); }).before(async () => { await createWidget('dxScheduler', { dataSource: [], @@ -306,13 +302,9 @@ test('Check cell active state', async (t) => { // NOTE: Moved "as is" from the QUnit integration.resources.tests (see history) test('[T716993]: should has horizontal scrollbar with multiple resources and fixed height container', async (t) => { const scheduler = new Scheduler('#container'); + const hasHScroll = await hasHorizontalScroll(scheduler.dateTableScrollableContainer); - const scrollableContainer = scheduler.dateTableScrollableContainer; - const scrollWidth = await scrollableContainer.scrollWidth; - const clientWidth = await scrollableContainer.clientWidth; - const hasHorizontalScroll = scrollWidth > clientWidth; - - await t.expect(hasHorizontalScroll).ok('workspace hasn\'t the horizontal scrollbar'); + await t.expect(hasHScroll).ok('workspace hasn\'t the horizontal scrollbar'); }).before(async () => { const resourcesDataSource = getResourcesDataSource(10); diff --git a/packages/devextreme/js/__internal/grids/grid_core/editor_factory/m_editor_factory.ts b/packages/devextreme/js/__internal/grids/grid_core/editor_factory/m_editor_factory.ts index 972b9beba24f..e4ef2b8ac67a 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/editor_factory/m_editor_factory.ts +++ b/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'; @@ -228,7 +229,7 @@ export class EditorFactory extends ViewControllerWithMixin { } protected updateFocusOverlay($element: dxElementWrapper, isHideBorder = false): void { - if (isHideBorder) { + if (isHideBorder || isDataRow($element)) { this._$focusOverlay.addClass(DX_HIDDEN); } else if ($element.length) { // align "right bottom" for Mozilla diff --git a/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts b/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts index b5760009f563..91502de6a270 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts @@ -726,9 +726,12 @@ const editorFactory = (Base: ModuleType) => class EditorFactorySt $element, this.addWidgetPrefix.bind(this), ); + const isGroupRow = isGroupRowElement($element); + const isGroupFooter = isGroupFooterRow($element); + const noExtraWidth = isLastCell || isFixedCell || isGroupRow || isGroupFooter; return { - width: elementRect.right - elementRect.left + (isLastCell || isFixedCell ? 0 : 1), + width: elementRect.right - elementRect.left + (noExtraWidth ? 0 : 1), height: elementRect.bottom - elementRect.top, }; }