Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataGrid - FilterRow cell loses focus when focusedRowEnabled is true and editing is in batch mode (T1246926) #27964

Merged
merged 6 commits into from
Aug 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions e2e/testcafe-devextreme/tests/dataGrid/focus/focus.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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'],
}));
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -2842,11 +2843,23 @@ const editing = (Base: ModuleType<EditingController>) => 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);
Expand Down
Loading