Form: fix get item by path (T1311534) (#31492)

Author: anna-shakhova

packages/devextreme/js/__internal/ui/form/form.ts

@@ -1448,11 +1448,11 @@ class Form extends Widget<FormProperties> {
   _getItemByField(field: string | {
     fieldName: string;
     fieldPath: string[];
-  }, items: PreparedItem[]): PreparedItem | false {
+  }, items: PreparedItem[]): PreparedItem | null {
     const fieldParts = isObject(field) ? field : this._getFieldParts(field);
     const { fieldName } = fieldParts;
     const { fieldPath } = fieldParts;
-    let resultItem: PreparedItem | false = false;
+    let resultItem: PreparedItem | null = null;
 
     if (items.length) {
       each(items, (_index: number, item: PreparedItem): boolean => {
@@ -1491,34 +1491,24 @@ class Form extends Widget<FormProperties> {
     fieldName: string;
     fieldPath: string[];
   } {
-    const fieldSeparator = '.';
-    let fieldName = field;
-    let separatorIndex = fieldName.indexOf(fieldSeparator);
-    const resultPath = [];
-
-    while (separatorIndex !== -1) {
-      // @ts-expect-error ts-error
-      resultPath.push(fieldName.substr(0, separatorIndex));
-      fieldName = fieldName.substr(separatorIndex + 1);
-      separatorIndex = fieldName.indexOf(fieldSeparator);
-    }
+    const [fieldName, ...fieldPath] = field.split('.').reverse();
 
     return {
       fieldName,
-      fieldPath: resultPath.reverse(),
+      fieldPath,
     };
   }
 
   _getItemByFieldPath(
     path: string[],
     fieldName: string,
     item: Item,
-  ): Item | false {
+  ): Item | null {
     const { itemType } = item;
     const subItemsField = this._getSubItemField(itemType);
 
     const isItemWithSubItems = itemType === 'group' || itemType === 'tabbed' || (item as TabItem).title;
-    let result: Item | false = false;
+    let result: Item | null = null;
 
     do {
       if (isItemWithSubItems) {
@@ -1534,7 +1524,7 @@ class Form extends Widget<FormProperties> {
           pathNode = path.pop();
         }
 
-        if (!path.length) {
+        if (!path.length && nameWithoutSpaces === pathNode) {
           result = this._getItemByField(fieldName, item[subItemsField]);
 
           // eslint-disable-next-line max-depth
@@ -1543,10 +1533,15 @@ class Form extends Widget<FormProperties> {
           }
         }
 
-        if (!isGroupWithName || (isGroupWithName && nameWithoutSpaces === pathNode)) {
+        const isGroupPathNodeOrUnnamed = !isGroupWithName
+          || (isGroupWithName && nameWithoutSpaces === pathNode);
+
+        if (isGroupPathNodeOrUnnamed && path.length) {
+          result = this._searchItemInEverySubItem(path, fieldName, item[subItemsField]);
+
           // eslint-disable-next-line max-depth
-          if (path.length) {
-            result = this._searchItemInEverySubItem(path, fieldName, item[subItemsField]);
+          if (!result) {
+            break;
           }
         }
       } else {
@@ -1565,20 +1560,17 @@ class Form extends Widget<FormProperties> {
     path: string[],
     fieldName: string,
     items: Item[],
-  ): Item | false {
-    let result: Item | false = false;
+  ): Item | null {
+    let result: Item | null = null;
     each(items, (_index: number, groupItem: GroupItem): boolean => {
       result = this._getItemByFieldPath(path.slice(), fieldName, groupItem);
+
       if (result) {
         return false;
       }
       return true;
     });
 
-    if (!result) {
-      return false;
-    }
-
     return result;
   }
 

packages/devextreme/js/__internal/ui/form/form.utils.ts

@@ -62,7 +62,7 @@ export const tryGetTabPath = (fullPath: string): string => {
 
 export const getItemPath = (
   items: PreparedItem[],
-  item: PreparedItem | false,
+  item: PreparedItem | null,
   isTabs?: boolean,
 ): string => {
   if (!item) {

packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.registerKeyHandler.tests.js

@@ -1,6 +1,10 @@
 import $ from 'jquery';
+import device from 'core/devices';
 
 import 'ui/form';
+import registerKeyHandlerTestHelper from '../../helpers/registerKeyHandlerTestHelper.js';
+
+const EDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
 QUnit.testStart(function() {
     const markup = '<div id="form"></div>';
@@ -32,3 +36,19 @@ QUnit.test('Set { items: [{dataField}] }, call registerKeyHandler', function(ass
     form.registerKeyHandler('tab', handler);
     assert.ok(true, 'no exceptions');
 });
+
+if(device.current().deviceType === 'desktop') {
+    const items = [
+        { dataField: 'name', editorType: 'dxTextBox' },
+        { dataField: 'age', editorType: 'dxNumberBox' }
+    ];
+
+    items.forEach((item) => {
+        registerKeyHandlerTestHelper.runTests({
+            createWidget: ($element) => $element.dxForm({ items: items }).dxForm('instance'),
+            keyPressTargetElement: (widget) => widget.getEditor(item.dataField).$element().find(`.${EDITOR_INPUT_CLASS}`),
+            checkInitialize: false,
+            testNamePrefix: `Form -> ${item.editorType}:`
+        });
+    });
+}

packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.update_items_dynamically.tests.js

@@ -2055,19 +2055,19 @@ module('Align labels', () => {
             }]
         });
 
-        testWrapper.setItemOption('title1.group1.description', 'visible', false);
+        testWrapper.setItemOption('title1.group2.description', 'visible', false);
         testWrapper.checkLabelsWidthInGroup({ columnIndex: 0, groupColumnIndex: 0, etalonLabelText: 'Home Address' });
         testWrapper.checkLabelsWidthInGroup({ columnIndex: 0, groupColumnIndex: 1, etalonLabelText: 'Last Name' });
 
-        testWrapper.setItemOption('title1.group1.homeAddress', 'visible', false);
+        testWrapper.setItemOption('title1.group2.homeAddress', 'visible', false);
         testWrapper.checkLabelsWidthInGroup({ columnIndex: 0, groupColumnIndex: 0, etalonLabelText: 'Name' });
         testWrapper.checkLabelsWidthInGroup({ columnIndex: 0, groupColumnIndex: 1, etalonLabelText: 'Last Name' });
 
-        testWrapper.setItemOption('title1.group1.description', 'visible', true);
+        testWrapper.setItemOption('title1.group2.description', 'visible', true);
         testWrapper.checkLabelsWidthInGroup({ columnIndex: 0, groupColumnIndex: 0, etalonLabelText: 'Description' });
         testWrapper.checkLabelsWidthInGroup({ columnIndex: 0, groupColumnIndex: 1, etalonLabelText: 'Last Name' });
 
-        testWrapper.setItemOption('title1.group1.homeAddress', 'visible', true);
+        testWrapper.setItemOption('title1.group2.homeAddress', 'visible', true);
         testWrapper.checkLabelsWidthInGroup({ columnIndex: 0, groupColumnIndex: 0, etalonLabelText: 'Description' });
         testWrapper.checkLabelsWidthInGroup({ columnIndex: 0, groupColumnIndex: 1, etalonLabelText: 'Home Address' });
     });