DataGrid - Header filter search input loses focus on first key in datetime columns (T1284663) (DevExpress#29768)

Co-authored-by: wdevfx <[email protected]>

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/headerFilter.ts

@@ -316,3 +316,45 @@ test('[T1284200] Should handle dxList "selectAll" when has unselected items on t
     visible: true,
   },
 }));
+
+test('Header filter search input loses focus on first key in datetime columns (T1284663)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const headerCell = dataGrid.getHeaders()
+    .getHeaderRow(0)
+    .getHeaderCell(0);
+  const filterIconElement = headerCell.getFilterIcon();
+  const headerFilter = new HeaderFilter();
+
+  await t
+    .click(filterIconElement)
+    .pressKey('1');
+
+  await t.wait(1500);
+
+  const searchInput = headerFilter.getSearchInput();
+
+  await t
+    .expect(searchInput.focused)
+    .ok();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [{
+    id: 1,
+    DeliveryDate: '2017/04/13 9:00',
+  }],
+  headerFilter: {
+    visible: true,
+  },
+  keyExpr: 'id',
+  columns: [{
+    dataField: 'DeliveryDate',
+    dataType: 'date',
+    headerFilter: {
+      dataSource: [
+        { text: 'March 11, 2025', value: '2025-03-11T00:00:00' },
+        { text: 'March 2, 2025', value: '2025-03-02T00:00:00' },
+        { text: 'February 3, 2025', value: '2025-02-03T00:00:00' },
+      ],
+      search: { enabled: true },
+    },
+  }],
+}));

packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts

@@ -2,6 +2,7 @@
 import '@ts/ui/list/modules/m_search';
 import '@ts/ui/list/modules/m_selection';
 
+import type { ChangedOptionInfo } from '@js/common/core/events';
 import messageLocalization from '@js/common/core/localization/message';
 import $ from '@js/core/renderer';
 import type { DeferredObj } from '@js/core/utils/deferred';
@@ -15,6 +16,7 @@ import Popup from '@js/ui/popup/ui.popup';
 import TreeView from '@js/ui/tree_view';
 import Modules from '@ts/grids/grid_core/m_modules';
 import type { ModuleType } from '@ts/grids/grid_core/m_types';
+import type TextBox from '@ts/ui/text_box/m_text_box';
 
 import gridCoreUtils from '../m_utils';
 
@@ -329,24 +331,52 @@ export class HeaderFilterView extends Modules.View {
       },
     };
 
-    function onOptionChanged(e) {
-      // T835492, T833015
-      if (e.fullName === 'searchValue' && needShowSelectAllCheckbox && that.option('headerFilter.hideSelectAllOnSearch') !== false) {
-        if (options.type === 'tree') {
-          e.component.option('showCheckBoxesMode', e.value ? 'normal' : 'selectAll');
-        } else {
-          e.component.option('selectionMode', e.value ? 'multiple' : 'all');
-        }
+    const shouldChangeSelectAllCheckBoxVisibility = (): boolean => needShowSelectAllCheckbox
+      && that.option('headerFilter.hideSelectAllOnSearch') !== false;
+
+    const onTreeViewOptionChanged = (
+      event: ChangedOptionInfo & {
+        component: TreeView & { _searchEditor: TextBox };
+      },
+    ): void => {
+      switch (true) {
+        case event.fullName === 'searchValue' && shouldChangeSelectAllCheckBoxVisibility():
+          event.component.option('showCheckBoxesMode', event.value ? 'normal' : 'selectAll');
+          break;
+        // TODO TreeView: remove this WA after Navigation squad re-render fix
+        // NOTE: WA for TreeView re-render after changing the "showCheckBoxesMode" option
+        // After this option change the whole TreeView re-render and search input loose the focus
+        case event.fullName === 'showCheckBoxesMode':
+          // NOTE: the TreeView render is async
+          // So we should focus the searchEditor only after render will be completed
+          Promise.resolve()
+            .then(() => {
+              event.component._searchEditor.focus();
+            })
+            .catch(() => {});
+          break;
+        default:
+          break;
       }
-    }
+    };
+
+    const onListOptionChanged = (
+      event: ChangedOptionInfo & {
+        component: dxList;
+      },
+    ): void => {
+      if (event.fullName === 'searchValue' && shouldChangeSelectAllCheckBoxVisibility()) {
+        event.component.option('selectionMode', event.value ? 'multiple' : 'all');
+      }
+    };
 
     if (options.type === 'tree') {
       that._listComponent = that._createComponent(
         $('<div>').appendTo($content),
         TreeView,
         extend(widgetOptions, {
           showCheckBoxesMode: needShowSelectAllCheckbox ? 'selectAll' : 'normal',
-          onOptionChanged,
+          onOptionChanged: onTreeViewOptionChanged,
           keyExpr: 'id',
         }),
       );
@@ -359,7 +389,7 @@ export class HeaderFilterView extends Modules.View {
           pageLoadMode: 'scrollBottom',
           showSelectionControls: true,
           selectionMode: needShowSelectAllCheckbox ? 'all' : 'multiple',
-          onOptionChanged,
+          onOptionChanged: onListOptionChanged,
           onSelectionChanged(event) {
             const { component: listComponent } = event;
             const items = listComponent.option('items');

packages/testcafe-models/dataGrid/headers/headerFilter.ts

@@ -6,6 +6,7 @@ const CLASS = {
   content: 'dx-overlay-content',
   list: 'dx-list',
   button: 'dx-button',
+  searchInput: 'dx-texteditor-input',
 };
 
 export default class HeaderFilter {
@@ -24,4 +25,8 @@ export default class HeaderFilter {
   getContent(): Selector {
     return this.element.find(`.${CLASS.content}`);
   }
+
+  getSearchInput(): Selector {
+    return this.element.find(`.${CLASS.searchInput}`);
+  }
 }