diff --git a/e2e/testcafe-devextreme/tests/dataGrid/focus/focus.ts b/e2e/testcafe-devextreme/tests/dataGrid/focus/focus.ts index 4ab8d20b809d..809f5d387dc1 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/focus/focus.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/focus/focus.ts @@ -1,5 +1,6 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid'; import { ClientFunction } from 'testcafe'; +import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; import { createWidget } from '../../../helpers/createWidget'; import url from '../../../helpers/getPageUrl'; @@ -148,3 +149,32 @@ test('Should remove dx-focused class on blur event from the cell', async (t) => })(); }); }); + +// T1246926 +test('DataGrid - FilterRow cell loses focus when focusedRowEnabled is true and editing is in batch mode', async (t) => { + const dataGrid = new DataGrid('#container'); + const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox).getInput(); + + await t + .click(dataGrid.getDataCell(0, 0).element) + .click(filterEditor) + .expect(filterEditor.focused) + .ok(); +}).before(async () => createWidget('dxDataGrid', { + dataSource: [ + { + ID: 1, + FirstName: 'John', + }, + ], + keyExpr: 'ID', + filterRow: { + visible: true, + }, + focusedRowEnabled: true, + editing: { + mode: 'batch', + allowUpdating: true, + }, + columns: ['FirstName'], +})); diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/const.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/const.ts index 70eb6fa5aab4..86734be0b393 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/editing/const.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/editing/const.ts @@ -97,6 +97,7 @@ export const ADD_ROW_BUTTON_CLASS = 'addrow-button'; export const DROPDOWN_EDITOR_OVERLAY_CLASS = 'dx-dropdowneditor-overlay'; export const DATA_ROW_CLASS = 'dx-data-row'; export const ROW_REMOVED = 'dx-row-removed'; +export const FILTER_ROW_CLASS = 'filter-row'; // eslint-disable-next-line @typescript-eslint/no-explicit-any const isRenovatedScrollable = !!(Scrollable as any).IS_RENOVATED_WIDGET; diff --git a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts index f053ecc8d372..18c210ed55f3 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts @@ -37,6 +37,7 @@ import { EDIT_MODE_FORM, EDIT_MODE_ROW, EDITOR_CELL_CLASS, + FILTER_ROW_CLASS, FOCUSABLE_ELEMENT_SELECTOR, ROW_CLASS, } from '../editing/const'; @@ -2842,11 +2843,23 @@ const editing = (Base: ModuleType) => class EditingController const result = super.closeEditCell.apply(this, arguments as any); - keyboardNavigation._updateFocus(); + const $focusedElement = this._getFocusedElement(); + const isFilterCell = !!$focusedElement.closest(`.${this.addWidgetPrefix(FILTER_ROW_CLASS)}`).length; + + if (!isFilterCell) { + keyboardNavigation._updateFocus(); + } return result; } + private _getFocusedElement() { + const $element = $(this.component.element?.()); + const $focusedElement = $element.find(':focus'); + + return $focusedElement; + } + protected _delayedInputFocus() { this._keyboardNavigationController._isNeedScroll = true; super._delayedInputFocus.apply(this, arguments as any);