DataGrid: fix focus overlay for filter row (T1287288) (DevExpress#29725) (DevExpress#29740)

Author: surohak

e2e/testcafe-devextreme/tests/dataGrid/filterRow/etalons/filter-row-focus-overlay (fluent.blue.light).png

@@ -5,6 +5,7 @@ import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { changeTheme } from '../../../helpers/changeTheme';
 import { getNumberData, getData } from '../helpers/generateDataSourceData';
+import { Themes } from '../../../helpers/themes';
 
 fixture.disablePageReloads`FilterRow`
   .page(url(__dirname, '../../container.html'));
@@ -157,3 +158,38 @@ test('Filter Row\'s Reset button does not work after a custom filter is set in F
     ],
   });
 });
+
+// T1287288
+test('Focus overlay should be visible in filter row when focusedRowEnabled is enabled (Fluent SaaS)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid('#container');
+  const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox);
+
+  await t
+    .click(dataGrid.getDataCell(0, 0).element)
+    .click(filterEditor.input)
+    // assert
+    .expect(filterEditor.input.focused)
+    .ok()
+    .expect(await takeScreenshot(`filter-row-focus-overlay (${Themes.fluentBlue}).png`, dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await changeTheme(Themes.fluentBlue);
+
+  return createWidget('dxDataGrid', {
+    dataSource: [
+      { ID: 1, Field: 'Item 1' },
+      { ID: 2, Field: 'Item 2' },
+      { ID: 3, Field: 'Item 3' },
+    ],
+    keyExpr: 'ID',
+    focusedRowEnabled: true,
+    filterRow: { visible: true },
+    showBorders: true,
+    columns: ['ID', 'Field'],
+  });
+}).after(async () => {
+  await changeTheme('generic.light');
+});

e2e/testcafe-devextreme/tests/dataGrid/filterRow/filterRow.ts

@@ -1,4 +1,5 @@
 import domAdapter from '@js/core/dom_adapter';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
@@ -639,6 +640,11 @@ export class ColumnHeadersView extends ColumnsView {
       }
     }
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public isFilterRowCell($cell: dxElementWrapper): boolean {
+    return false;
+  }
 }
 
 export const columnHeadersModule = {

packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts

@@ -14,6 +14,7 @@ import eventsEngine from '@js/events/core/events_engine';
 import pointerEvents from '@js/events/pointer';
 import { addNamespace, normalizeKeyName } from '@js/events/utils/index';
 import EditorFactoryMixin from '@js/ui/shared/ui.editor_factory_mixin';
+import type { ColumnHeadersView } from '@ts/grids/grid_core/column_headers/m_column_headers';
 import type {
   ColumnsResizerViewController,
 } from '@ts/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering';
@@ -78,6 +79,8 @@ export class EditorFactory extends ViewControllerWithMixin {
 
   protected _validatingController!: ValidatingController;
 
+  protected _columnHeadersView!: ColumnHeadersView;
+
   private _subscribedContainerRoot!: Node;
 
   public init() {
@@ -89,6 +92,7 @@ export class EditorFactory extends ViewControllerWithMixin {
     this._keyboardNavigationController = this.getController('keyboardNavigation');
     this._columnsController = this.getController('columns');
     this._validatingController = this.getController('validating');
+    this._columnHeadersView = this.getView('columnHeadersView');
     this._rowsView = this.getView('rowsView');
 
     this._updateFocusHandler = this._updateFocusHandler || this.createAction(this._updateFocus.bind(this));

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

@@ -769,6 +769,10 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
       }
     });
   }
+
+  public isFilterRowCell($cell): boolean {
+    return !!$cell.closest(`.${this.addWidgetPrefix(FILTER_ROW_CLASS)}`).length;
+  }
 };
 
 const data = (Base: ModuleType<DataController>) => class DataControllerFilterRowExtender extends Base {

packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts

@@ -505,15 +505,19 @@ const keyboardNavigation = (Base: ModuleType<KeyboardNavigationController>) => c
 const editorFactory = (Base: ModuleType<EditorFactory>) => class FocusEditorFactoryExtender extends Base {
   protected renderFocusOverlay($element, isHideBorder) {
     const focusedRowEnabled = this.option('focusedRowEnabled');
-    let $cell;
 
-    if (!focusedRowEnabled || !this._keyboardNavigationController?.isRowFocusType() || this._editingController.isEditing()) {
+    if (
+      !focusedRowEnabled
+      || !this._keyboardNavigationController?.isRowFocusType()
+      || this._editingController.isEditing()
+      || this._columnHeadersView.isFilterRowCell($element)
+    ) {
       super.renderFocusOverlay($element, isHideBorder);
     } else if (focusedRowEnabled) {
       const isRowElement = this._keyboardNavigationController._getElementType($element) === 'row';
 
       if (isRowElement && !$element.hasClass(ROW_FOCUSED_CLASS)) {
-        $cell = this._keyboardNavigationController.getFirstValidCellInRow($element);
+        const $cell = this._keyboardNavigationController.getFirstValidCellInRow($element);
         this._keyboardNavigationController.focus($cell);
       }
     }