fix: corrects tab paths when nested within other row like fields (#6712)

Fixes https://github.com/payloadcms/payload/issues/6637

There was an issue where tab paths were being generated based on 2
scenarios when there are 3 possible scenarios:
- A path is provided and the tab is named
- A path is **not** provided but the tab is named
- Neither a path or a tab name are provided

packages/ui/src/fields/Tabs/index.tsx

@@ -113,6 +113,17 @@ const TabsField: React.FC<TabsFieldProps> = (props) => {
 
   const activeTabConfig = tabs[activeTabIndex]
 
+  function generateTabPath() {
+    let tabPath = path
+    if (path && activeTabConfig.name) {
+      tabPath = `${path}.${activeTabConfig.name}`
+    } else if (!path && activeTabConfig.name) {
+      tabPath = activeTabConfig.name
+    }
+
+    return tabPath
+  }
+
   return (
     <div
       className={[
@@ -168,7 +179,7 @@ const TabsField: React.FC<TabsFieldProps> = (props) => {
                       : activeTabConfig['name']
                   }
                   margins="small"
-                  path={`${path ? `${path}.` : ''}${activeTabConfig.name ? `${activeTabConfig.name}` : ''}`}
+                  path={generateTabPath()}
                   permissions={
                     'name' in activeTabConfig && permissions?.fields?.[activeTabConfig.name]?.fields
                       ? permissions?.fields?.[activeTabConfig.name]?.fields

test/fields/collections/Tabs2/index.ts

@@ -0,0 +1,39 @@
+import type { CollectionConfig } from 'payload/types'
+
+import { tabsFields2Slug } from '../../slugs.js'
+
+export const TabsFields2: CollectionConfig = {
+  slug: tabsFields2Slug,
+  fields: [
+    {
+      name: 'tabsInArray',
+      type: 'array',
+      fields: [
+        {
+          type: 'tabs',
+          label: 'tabs',
+          tabs: [
+            {
+              label: 'tab1',
+              fields: [
+                {
+                  type: 'text',
+                  name: 'text',
+                },
+              ],
+            },
+            {
+              name: 'tab2',
+              fields: [
+                {
+                  type: 'text',
+                  name: 'text2',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}

test/fields/config.ts

@@ -27,6 +27,7 @@ import RichTextFields from './collections/RichText/index.js'
 import RowFields from './collections/Row/index.js'
 import SelectFields from './collections/Select/index.js'
 import TabsFields from './collections/Tabs/index.js'
+import { TabsFields2 } from './collections/Tabs2/index.js'
 import TextFields from './collections/Text/index.js'
 import UIFields from './collections/UI/index.js'
 import Uploads from './collections/Upload/index.js'
@@ -70,6 +71,7 @@ export const collectionSlugs: CollectionConfig[] = [
   RelationshipFields,
   RichTextFields,
   SelectFields,
+  TabsFields2,
   TabsFields,
   TextFields,
   Uploads,

test/fields/e2e.spec.ts

@@ -19,7 +19,12 @@ import { reInitializeDB } from '../helpers/reInitializeDB.js'
 import { RESTClient } from '../helpers/rest.js'
 import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../playwright.config.js'
 import { jsonDoc } from './collections/JSON/shared.js'
-import { arrayFieldsSlug, blockFieldsSlug, collapsibleFieldsSlug } from './slugs.js'
+import {
+  arrayFieldsSlug,
+  blockFieldsSlug,
+  collapsibleFieldsSlug,
+  tabsFields2Slug,
+} from './slugs.js'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
@@ -445,4 +450,26 @@ describe('fields', () => {
       await expect(fieldRelyingOnSiblingData).toBeVisible()
     })
   })
+
+  describe('tabs', () => {
+    let url: AdminUrlUtil
+    beforeAll(() => {
+      url = new AdminUrlUtil(serverURL, tabsFields2Slug)
+    })
+
+    test('should correctly save nested unnamed and named tabs', async () => {
+      await page.goto(url.create)
+
+      await page.locator('#field-tabsInArray .array-field__add-row').click()
+      await page.locator('#field-tabsInArray__0__text').fill('tab 1 text')
+      await page.locator('.tabs-field__tabs button:nth-child(2)').click()
+      await page.locator('#field-tabsInArray__0__tab2__text2').fill('tab 2 text')
+
+      await saveDocAndAssert(page)
+
+      await expect(page.locator('#field-tabsInArray__0__text')).toHaveValue('tab 1 text')
+      await page.locator('.tabs-field__tabs button:nth-child(2)').click()
+      await expect(page.locator('#field-tabsInArray__0__tab2__text2')).toHaveValue('tab 2 text')
+    })
+  })
 })

test/fields/payload-types.ts

@@ -46,6 +46,7 @@ export interface Config {
     'relationship-fields': RelationshipField;
     'rich-text-fields': RichTextField;
     'select-fields': SelectField;
+    'tabs-fields-2': TabsFields2;
     'tabs-fields': TabsField;
     'text-fields': TextField;
     uploads: Upload;
@@ -1125,6 +1126,24 @@ export interface SelectField {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "tabs-fields-2".
+ */
+export interface TabsFields2 {
+  id: string;
+  tabsInArray?:
+    | {
+        text?: string | null;
+        tab2?: {
+          text2?: string | null;
+        };
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "tabs-fields".

test/fields/slugs.ts

@@ -20,6 +20,7 @@ export const richTextFieldsSlug = 'rich-text-fields'
 export const rowFieldsSlug = 'row-fields'
 export const selectFieldsSlug = 'select-fields'
 export const tabsFieldsSlug = 'tabs-fields'
+export const tabsFields2Slug = 'tabs-fields-2'
 export const textFieldsSlug = 'text-fields'
 export const uploadsSlug = 'uploads'
 export const uploads2Slug = 'uploads2'
@@ -48,6 +49,7 @@ export const collectionSlugs = [
   rowFieldsSlug,
   selectFieldsSlug,
   tabsFieldsSlug,
+  tabsFields2Slug,
   textFieldsSlug,
   uploadsSlug,
   uploads2Slug,