DataGrid: Fix double calling of the onKeyDown event for headers and group panel (DevExpress#29845)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/keyboardNavigation.functional.ts

@@ -15,6 +15,8 @@ const getOrderOfEventCalls = ClientFunction(
   () => (window as any).focusedEventsTestData.map((data) => data.type),
 );
 
+const getOnKeyDownCallCount = ClientFunction(() => (window as any).onKeyDownCallCount);
+
 fixture.disablePageReloads`Keyboard Navigation - common`
   .page(url(__dirname, '../../../container.html'));
 
@@ -5101,3 +5103,73 @@ test('Focus events should be called when pressing the Ctrl + End key', async (t)
     delete (window as any).focusedEventsTestData;
   })();
 });
+
+test('DataGrid - The onKeyDown event should be called once for group panel', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const firstGroupedColumn = dataGrid.getGroupPanel().getHeader(0);
+
+  await t.click(firstGroupedColumn.element);
+
+  // act
+  await t.pressKey('tab');
+
+  // assert
+  await t.expect(getOnKeyDownCallCount()).eql(1);
+}).before(async () => {
+  await ClientFunction(() => {
+    (window as any).onKeyDownCallCount = 0;
+  })();
+
+  await createWidget('dxDataGrid', {
+    dataSource: getData(5, 5),
+    showBorders: true,
+    onKeyDown() {
+      (window as any).onKeyDownCallCount += 1;
+    },
+    groupPanel: {
+      visible: true,
+    },
+    columns: [
+      { dataField: 'field_0', groupIndex: 0 },
+      { dataField: 'field_1', groupIndex: 1 },
+      'field_2',
+      'field_3',
+      'field_4',
+    ],
+  });
+}).after(async () => {
+  await ClientFunction(() => {
+    delete (window as any).onKeyDownCallCount;
+  })();
+});
+
+test('DataGrid - The onKeyDown event should be called once for headers', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const firstHeader = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0);
+
+  await t.click(firstHeader.element);
+
+  // act
+  await t.pressKey('tab');
+
+  // assert
+  await t.expect(getOnKeyDownCallCount()).eql(1);
+}).before(async () => {
+  await ClientFunction(() => {
+    (window as any).onKeyDownCallCount = 0;
+  })();
+
+  await createWidget('dxDataGrid', {
+    dataSource: getData(5, 5),
+    showBorders: true,
+    onKeyDown() {
+      (window as any).onKeyDownCallCount += 1;
+    },
+  });
+}).after(async () => {
+  await ClientFunction(() => {
+    delete (window as any).onKeyDownCallCount;
+  })();
+});

packages/devextreme/js/__internal/grids/grid_core/m_accessibility.ts

@@ -1,16 +1,20 @@
 import * as accessibility from '@js/ui/shared/accessibility';
 
 export const registerKeyboardAction = function (viewName, instance, $element, selector, action) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let executeKeyDown = (args) => {};
   const keyboardController = instance.getController('keyboardNavigation');
   if (instance.option('useLegacyKeyboardNavigation') || (keyboardController && !keyboardController.isKeyboardEnabled())) {
     return;
   }
 
-  const executeKeyDown = (args) => {
-    instance.executeAction('onKeyDown', args);
-  };
+  if (viewName === 'filterPanel') {
+    executeKeyDown = (args) => {
+      instance.executeAction('onKeyDown', args);
+    };
 
-  instance.createAction('onKeyDown');
+    instance.createAction('onKeyDown');
+  }
 
   accessibility.registerKeyboardAction(viewName, instance, $element, selector, action, executeKeyDown);
 };

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.accessibility.tests.js

@@ -77,7 +77,7 @@ QUnit.module('Keyboard navigation accessibility', {
 
         setupDataGridModules(this,
             ['data', 'columns', 'columnHeaders', 'sorting', 'columnFixing', 'grouping', 'groupPanel', 'headerPanel', 'pager', 'headerFilter', 'filterSync', 'filterPanel', 'filterRow',
-                'rows', 'editorFactory', 'gridView', 'editing', 'editingRowBased', 'editingFormBased', 'editingCellBased', 'selection', 'focus', 'keyboardNavigation', 'validating', 'masterDetail'],
+                'rows', 'editorFactory', 'gridView', 'editing', 'editingRowBased', 'editingFormBased', 'editingCellBased', 'selection', 'focus', 'groupPanelKeyboardNavigation', 'headersKeyboardNavigation', 'keyboardNavigation', 'validating', 'masterDetail'],
             { initViews: true }
         );
     },