Collection: only the CollectionWidget.Edit should contain logic related to selection functionality (DevExpress#29567)

Author: EugeniyKiyashko

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

@@ -50,7 +50,6 @@ const ITEM_DATA_KEY = 'dxItemData';
 const ITEM_INDEX_KEY = 'dxItemIndex';
 const ITEM_TEMPLATE_ID_PREFIX = 'tmpl-';
 const ITEMS_OPTIONS_NAME = 'dxItem';
-const SELECTED_ITEM_CLASS = 'dx-item-selected';
 const ITEM_RESPONSE_WAIT_CLASS = 'dx-item-response-wait';
 const EMPTY_COLLECTION = 'dx-empty-collection';
 const TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
@@ -105,8 +104,6 @@ export interface CollectionWidgetBaseProperties<
 > extends CollectionWidgetOptions<TComponent, TItem, TKey> {
   focusedElement?: dxElementWrapper;
 
-  focusOnSelectedItem?: boolean;
-
   encodeNoDataText?: boolean;
 
   _itemAttributes?: Record<string, unknown>;
@@ -236,7 +233,6 @@ class CollectionWidget<
 
       _itemAttributes: {},
       itemTemplateProperty: 'template',
-      focusOnSelectedItem: true,
       focusedElement: null,
 
       displayExpr: undefined,
@@ -420,25 +416,24 @@ class CollectionWidget<
       return $focusedElement;
     }
 
-    const { focusOnSelectedItem } = this.option();
+    return this._determineFocusedElement(last);
+  }
 
-    let index = focusOnSelectedItem ? this._getFlatIndex() : 0;
+  _determineFocusedElement(last?: boolean): dxElementWrapper {
+    let index = this._getFocusedElementIndex();
 
     const activeElements = this._getActiveElement();
     const lastIndex = activeElements.length - 1;
 
-    // @ts-expect-error ts-error
     if (index < 0) {
       index = last ? lastIndex : 0;
     }
-    // @ts-expect-error ts-error
+
     return activeElements.eq(index);
   }
 
-  _getFlatIndex(): number | undefined {
-    const { selectedIndex } = this.option();
-
-    return selectedIndex;
+  _getFocusedElementIndex(): number {
+    return 0;
   }
 
   // eslint-disable-next-line consistent-return
@@ -655,10 +650,14 @@ class CollectionWidget<
   _resetItemFocus($item: dxElementWrapper): void {
     // @ts-expect-error ts-error
     if ($item.is(this.option('focusedElement'))) {
-      this.option('focusedElement', null);
+      this._resetFocusedElement();
     }
   }
 
+  _resetFocusedElement(): void {
+    this.option('focusedElement', null);
+  }
+
   _refreshItem(
     $item: dxElementWrapper,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -732,7 +731,6 @@ class CollectionWidget<
         break;
       case 'selectOnFocus':
       case 'loopItemFocus':
-      case 'focusOnSelectedItem':
         break;
       case 'focusedElement':
         this._updateFocusedItemState(previousValue as Element | undefined, false, true);
@@ -753,7 +751,7 @@ class CollectionWidget<
   }
 
   _invalidate(): void {
-    this.option('focusedElement', null);
+    this._resetFocusedElement();
 
     super._invalidate();
   }
@@ -858,10 +856,6 @@ class CollectionWidget<
     return `${this._itemClass()}${CONTENT_CLASS_POSTFIX}`;
   }
 
-  _selectedItemClass(): string {
-    return SELECTED_ITEM_CLASS;
-  }
-
   _itemResponseWaitClass(): string {
     return ITEM_RESPONSE_WAIT_CLASS;
   }

packages/devextreme/js/__internal/ui/collection/m_collection_widget.edit.ts

@@ -31,7 +31,9 @@ import type MenuBaseEditStrategy from '../context_menu/m_menu_base.edit.strategy
 import type GroupedEditStrategy from '../list/m_list.edit.strategy.grouped';
 
 const ITEM_DELETING_DATA_KEY = 'dxItemDeleting';
-const NOT_EXISTING_INDEX = -1;
+const SELECTED_ITEM_CLASS = 'dx-item-selected';
+
+export const NOT_EXISTING_INDEX = -1;
 
 const indexExists = (index): boolean => index !== NOT_EXISTING_INDEX;
 
@@ -46,6 +48,8 @@ export interface CollectionWidgetEditProperties<
   selectionMode?: SingleMultipleOrNone | SingleMultipleAllOrNone;
 
   selectionRequired?: boolean;
+
+  focusOnSelectedItem?: boolean;
 }
 
 class CollectionWidget<
@@ -87,6 +91,7 @@ class CollectionWidget<
       maxFilterLengthInRequest: 1500,
       keyExpr: null,
       selectedIndex: NOT_EXISTING_INDEX,
+      focusOnSelectedItem: true,
       selectedItem: null,
       onSelectionChanging: null,
       onSelectionChanged: null,
@@ -119,6 +124,10 @@ class CollectionWidget<
     this._keyGetter = compileGetter(this.option('keyExpr'));
   }
 
+  _selectedItemClass(): string {
+    return SELECTED_ITEM_CLASS;
+  }
+
   // eslint-disable-next-line class-methods-use-this
   _getActionsList(): ('onSelectionChanging' | 'onSelectionChanged')[] {
     return ['onSelectionChanging', 'onSelectionChanged'];
@@ -570,7 +579,6 @@ class CollectionWidget<
         }
 
         this._editStrategy.endCache();
-
         this._updateSelection(addedSelection, removedSelection);
       }
 
@@ -591,6 +599,20 @@ class CollectionWidget<
     this.setAria('selected', value, $target);
   }
 
+  _getFocusedElementIndex(): number {
+    const { focusOnSelectedItem } = this.option();
+
+    return focusOnSelectedItem
+      ? this._getFlatIndex()
+      : super._getFocusedElementIndex();
+  }
+
+  _getFlatIndex(): number {
+    const { selectedIndex = NOT_EXISTING_INDEX } = this.option();
+
+    return selectedIndex;
+  }
+
   _removeSelection(normalizedIndex: number): void {
     const $itemElement = this._editStrategy.getItemElement(normalizedIndex);
 
@@ -653,6 +675,8 @@ class CollectionWidget<
       case 'onItemReordered':
       case 'maxFilterLengthInRequest':
         break;
+      case 'focusOnSelectedItem':
+        break;
       default:
         super._optionChanged(args);
     }

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

@@ -6,6 +6,7 @@ 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 { NOT_EXISTING_INDEX } from '@ts/ui/collection/m_collection_widget.edit';
 
 import type { ListBaseProperties } from './m_list.base';
 import { ListBase } from './m_list.base';
@@ -322,8 +323,8 @@ class ListEdit extends ListBase {
     this.scrollToItem(this.option('focusedElement'));
   }
 
-  _getFlatIndex(): number | undefined {
-    const { selectedIndex } = this.option();
+  _getFlatIndex(): number {
+    const { selectedIndex = NOT_EXISTING_INDEX } = this.option();
 
     if (isNumeric(selectedIndex) || !selectedIndex) {
       return selectedIndex;