Form: fix get item by path (T1311534)

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
@@ -1565,19 +1555,13 @@ 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;
+    });
 
     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.tests.js

@@ -2580,6 +2580,55 @@ QUnit.test('Use \'itemOption\' with groups and one group has empty caption (T359
     assert.equal($testContainer.find('.' + FORM_GROUP_CAPTION_CLASS).last().text(), 'custom', 'new caption rendered');
 });
 
+QUnit.test('Use \'itemOption\' with path when items have same name or caption (T1311534)', function(assert) {
+    const targetField = {
+        itemType: 'simple',
+        name: 'Target',
+    };
+
+    const targetGroup = {
+        itemType: 'group',
+        caption: 'Target',
+        items: [
+            { itemType: 'simple', name: 'Field1' },
+            { itemType: 'simple', name: 'Field2' },
+            { itemType: 'simple', name: 'Field3' },
+        ],
+    };
+
+    const targetFieldInGroup = {
+        ...targetField,
+        caption: 'Target in Group'
+    };
+
+    const form = $('#form').dxForm({
+        formData: {},
+        items: [
+            {
+                itemType: 'group',
+                name: 'ContainerGroup',
+                items: [
+                    { itemType: 'simple', name: 'Field4' },
+                    targetGroup,
+                ]
+            },
+            {
+                itemType: 'group',
+                name: 'FieldGroup',
+                items: [
+                    targetFieldInGroup,
+                    { itemType: 'simple', name: 'Field5' },
+                ],
+            },
+            targetField,
+        ] }
+    ).dxForm('instance');
+
+    assert.deepEqual(form.itemOption('Target'), targetField, 'Simple item retrieved by name');
+    assert.deepEqual(form.itemOption('ContainerGroup.Target'), targetGroup, 'Group item in group retrieved by path');
+    assert.deepEqual(form.itemOption('FieldGroup.Target'), targetFieldInGroup, 'Simple item in group retrieved by path');
+});
+
 QUnit.test('Use \'itemOption\' with tabs', function(assert) {
     const $testContainer = $('#form').dxForm({
         formData: { EmployeeID: 1, LastName: 'John', FirstName: 'Dow', BirthData: '01/01/1970', HireDate: '12/11/1995', Country: 'USA', City: 'Phoenix', Region: 'Arizona', Title: 'Ms' },