DataGrid: fix Ctrl+Arrow movement when in the same page more than 1 DataGrid (T1285596) (DevExpress#29782) (DevExpress#29787)

Author: haksur

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

@@ -4767,3 +4767,45 @@ test('Cancel button in the last column cannot be focused via the Tab key (T12489
     'FirstName',
   ],
 }));
+
+const getDataGridProps = () => ({
+  dataSource: getData(5, 2),
+  columns: ['field_0', 'field_1'],
+  filterRow: { visible: true },
+});
+
+// T1285421
+test('Multiple DataGrids - Ctrl+Up/Down from filter row should focus data row in the same grid', async (t) => {
+  const firstGrid = new DataGrid('#container');
+  const secondGrid = new DataGrid('#otherContainer');
+
+  // Ensure both grids are ready
+  await t
+    .expect(firstGrid.isReady())
+    .ok('First grid is ready')
+    .expect(secondGrid.isReady())
+    .ok('Second grid is ready');
+
+  const firstDataGridFilterCell = firstGrid
+    .getHeaders().getFilterRow().getFilterCell(0).getEditorInput().element;
+  const secondDataGridFilterCell = secondGrid
+    .getHeaders().getFilterRow().getFilterCell(0).getEditorInput().element;
+  const firstGridDataCell = firstGrid.getDataRow(0).getDataCell(0).element;
+  const secondGridDataCell = secondGrid.getDataRow(0).getDataCell(0).element;
+
+  await t
+    .click(secondGridDataCell)
+    .pressKey('ctrl+up')
+    .expect(secondDataGridFilterCell.focused)
+    .ok('Second grid filter cell is focused')
+    .expect(firstDataGridFilterCell.focused)
+    .notOk('First grid data filter cell is not focused')
+    .pressKey('ctrl+down')
+    .expect(secondGridDataCell.focused)
+    .ok('Second grid data cell is focused')
+    .expect(firstGridDataCell.focused)
+    .notOk('First grid data cell is not focused');
+}).before(async () => {
+  await createWidget('dxDataGrid', getDataGridProps());
+  await createWidget('dxDataGrid', getDataGridProps(), '#otherContainer');
+});

packages/devextreme/js/ui/shared/accessibility.js

@@ -80,12 +80,16 @@ function getActiveAccessibleElements(ariaLabel, viewElement) {
     return $activeElements;
 }
 
-function findFocusedViewElement(viewSelectors, element) {
-    const root = element?.getRootNode() || domAdapter.getDocument();
+function findFocusedViewElement(instanceRootDomNode, viewSelectors, element) {
+    const root = instanceRootDomNode ?? element?.getRootNode() ?? domAdapter.getDocument();
+
+    if(!root) { return; }
+
+    const $root = $(root);
 
     for(const index in viewSelectors) {
         const selector = viewSelectors[index];
-        const $focusViewElement = $(root).find(selector).first();
+        const $focusViewElement = $root.find(selector).first();
 
         if($focusViewElement.length) {
             return $focusViewElement;
@@ -176,11 +180,13 @@ export function selectView(viewName, instance, event) {
         const viewNames = Object.keys(viewItemSelectorMap);
         let viewItemIndex = viewNames.indexOf(viewName);
 
+        const instanceRootDomNode = instance?.component?.element?.();
+
         while(viewItemIndex >= 0 && viewItemIndex < viewNames.length) {
             viewItemIndex = keyName === 'upArrow' ? --viewItemIndex : ++viewItemIndex;
             const viewName = viewNames[viewItemIndex];
             const viewSelectors = viewItemSelectorMap[viewName];
-            const $focusViewElement = findFocusedViewElement(viewSelectors, event.target);
+            const $focusViewElement = findFocusedViewElement(instanceRootDomNode, viewSelectors, event.target);
             if($focusViewElement && $focusViewElement.length) {
                 $focusViewElement.attr('tabindex', instance.option('tabindex') || 0);
                 eventsEngine.trigger($focusViewElement, 'focus');

packages/devextreme/testing/helpers/gridBaseMocks.js

@@ -940,6 +940,8 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
 
         that.NAME = 'dx' + nameWidget;
 
+        that.element = () => $('#container');
+
         that.focus = commonUtils.noop;
 
         that.setAria = function(name, value, $target) {