List: selected item should receive focus when the list is grouped (T1278005) (DevExpress#29354)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts

@@ -423,9 +423,9 @@ class CollectionWidget<
       return $focusedElement;
     }
 
-    const { focusOnSelectedItem, selectedIndex } = this.option();
+    const { focusOnSelectedItem } = this.option();
 
-    let index = focusOnSelectedItem ? selectedIndex : 0;
+    let index = focusOnSelectedItem ? this._getFlatIndex() : 0;
 
     const activeElements = this._getActiveElement();
     const lastIndex = activeElements.length - 1;
@@ -438,6 +438,12 @@ class CollectionWidget<
     return activeElements.eq(index);
   }
 
+  _getFlatIndex(): number | undefined {
+    const { selectedIndex } = this.option();
+
+    return selectedIndex;
+  }
+
   // eslint-disable-next-line consistent-return
   _moveFocus(
     location: string,

packages/devextreme/js/__internal/ui/list/m_list.edit.ts

@@ -4,6 +4,7 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { extend } from '@js/core/utils/extend';
 import type { Item } from '@js/ui/list';
+import { isNumeric } from '@ts/core/utils/m_type';
 import type { OptionChanged } from '@ts/core/widget/types';
 
 import type { ListBaseProperties } from './m_list.base';
@@ -317,6 +318,19 @@ class ListEdit extends ListBase {
     this.scrollToItem(this.option('focusedElement'));
   }
 
+  _getFlatIndex(): number | undefined {
+    const { selectedIndex } = this.option();
+
+    if (isNumeric(selectedIndex) || !selectedIndex) {
+      return selectedIndex;
+    }
+
+    const $item = this._editStrategy.getItemElement(selectedIndex);
+    const index = this.getFlatIndexByItemElement($item);
+
+    return index;
+  }
+
   _optionChanged(args: OptionChanged<ListBaseProperties>): void {
     switch (args.name) {
       case 'selectAllMode':

packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js

@@ -4315,6 +4315,46 @@ QUnit.module('keyboard navigation', {
         assert.ok(secondItemIsFocused, 'focused item change to last visible item on new page');
     });
 
+    QUnit.test('focus should be moved to selectedItem after focusing of grouped list (T1278005)', function(assert) {
+        const list = $('#list').dxList({
+            selectedItemKeys: [5],
+            keyExpr: 'id',
+            items: [{
+                key: 'a',
+                items: [
+                    { id: 1, text: '1' },
+                    { id: 2, text: '2' },
+                    { id: 3, text: '3' },
+                ] }, {
+                key: 'b',
+                items: [
+                    { id: 4, text: '4' },
+                    { id: 5, text: '5' },
+                    { id: 6, text: '6' },
+                ] },
+            ],
+            grouped: true,
+            focusStateEnabled: true,
+            collapsibleGroups: false,
+            selectionMode: 'multiple',
+            showSelectionControls: false,
+        }).dxList('instance');
+
+        const $element = $(list.element());
+
+        const keyboard = getListKeyboard($element);
+        list.focus();
+
+        const $items = $element.find(`.${LIST_ITEM_CLASS}`);
+
+        assert.strictEqual($items.eq(4).hasClass(FOCUSED_STATE_CLASS), true, 'focused class is added to selected item');
+
+        keyboard.keyDown('down');
+
+        assert.strictEqual($items.eq(4).hasClass(FOCUSED_STATE_CLASS), false, 'focused class is removed');
+        assert.strictEqual($items.eq(5).hasClass(FOCUSED_STATE_CLASS), true, 'next item is focused');
+    });
+
     QUnit.test('list should attach keyboard events even if focusStateEnabled is false when the widget\'s onKeyboardHandled is defined', function(assert) {
         const handler = sinon.stub();
         const $element = $('#list');