fix(ui): tab error badge not counting required array validation errors (#15563)

### What
Fixes tab error badges not showing validation errors for required array
fields.

### Why
When a tab contained a required array field with 0 rows, the error badge
wouldn't appear on the tab after save. This happened because
`WatchChildErrors` only matched nested field paths (like
`items.0.value`) but missed the array field's own validation error at
`items`.

### How
Updated the path matching logic in `WatchChildErrors` to check both
nested paths and the field itself when the segment ends with a dot.
Added e2e tests for both named and unnamed tabs with required arrays.

Fixes #15561

Author: PatrikKozak

packages/ui/src/forms/WatchChildErrors/index.tsx

@@ -36,7 +36,10 @@ export const WatchChildErrors: React.FC<TrackSubSchemaErrorCountProps> = ({
             const segmentToMatch = [...parentPath, segment].join('.')
             // match fields with same parent path
             if (segmentToMatch.endsWith('.')) {
-              return key.startsWith(segmentToMatch)
+              // Match both nested fields (key starts with segmentToMatch)
+              // and the field itself (key equals segmentToMatch without trailing dot)
+              const pathWithoutDot = segmentToMatch.slice(0, -1)
+              return key.startsWith(segmentToMatch) || key === pathWithoutDot
             }
             // match fields with same path
             return key === segmentToMatch

test/field-error-states/collections/ErrorFields/index.ts

@@ -190,6 +190,41 @@ export const ErrorFieldsCollection: CollectionConfig = {
           fields: errorFields,
           label: 'Hero',
         },
+        {
+          name: 'tabWithRequiredArray',
+          label: 'Tab with Required Array',
+          fields: [
+            {
+              name: 'requiredArray',
+              type: 'array',
+              required: true,
+              fields: [
+                {
+                  name: 'arrayText',
+                  type: 'text',
+                  required: true,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Unnamed Tab with Required Array',
+          fields: [
+            {
+              name: 'unnamedRequiredArray',
+              type: 'array',
+              required: true,
+              fields: [
+                {
+                  name: 'arrayText',
+                  type: 'text',
+                  required: true,
+                },
+              ],
+            },
+          ],
+        },
       ],
     },
     {

test/field-error-states/e2e.spec.ts

@@ -206,7 +206,7 @@ describe('Field Error States', () => {
   })
 
   describe('error field types', () => {
-    async function prefillBaseRequiredFields(page: Page) {
+    async function prefillHomeAndHeroTabs(page: Page) {
       const homeTabLocator = page.locator('.tabs-field__tab-button', {
         hasText: 'Home',
       })
@@ -225,6 +225,27 @@ describe('Field Error States', () => {
       await page.locator('#field-tabText').fill('Hero Tab Text')
       await page.locator('#field-text').fill('Hero Tab Collapsible Text')
     }
+
+    async function prefillBaseRequiredFields(page: Page) {
+      await prefillHomeAndHeroTabs(page)
+
+      // fill out new tabs with required arrays
+      const tabWithRequiredArrayButton = page.getByRole('button', {
+        name: 'Tab with Required Array',
+        exact: true,
+      })
+      await tabWithRequiredArrayButton.click()
+      await addArrayRow(page, { fieldName: 'tabWithRequiredArray__requiredArray' })
+      await page.locator('#field-tabWithRequiredArray__requiredArray__0__arrayText').fill('Test')
+
+      const unnamedTabButton = page.getByRole('button', {
+        name: 'Unnamed Tab with Required Array',
+        exact: true,
+      })
+      await unnamedTabButton.click()
+      await addArrayRow(page, { fieldName: 'unnamedRequiredArray' })
+      await page.locator('#field-unnamedRequiredArray__0__arrayText').fill('Test')
+    }
     test('group errors', async ({ page }) => {
       await page.goto(errorFieldsURL.create)
       await waitForFormReady(page)
@@ -246,5 +267,56 @@ describe('Field Error States', () => {
       await expect(page.locator('#field-group .group-field__header .error-pill')).toBeHidden()
       await saveDocAndAssert(page, '#action-save')
     })
+
+    test('tab error badge with required array field', async ({ page }) => {
+      await page.goto(errorFieldsURL.create)
+      await waitForFormReady(page)
+      await prefillHomeAndHeroTabs(page)
+
+      const tabWithRequiredArrayButton = page.getByRole('button', {
+        name: 'Tab with Required Array',
+        exact: true,
+      })
+      await tabWithRequiredArrayButton.click()
+
+      await saveDocAndAssert(page, '#action-save', 'error')
+
+      // should show the error badge on the tab
+      const tabErrorBadge = page.locator('.tabs-field__tab-button--active .error-pill')
+      await expect(tabErrorBadge).toBeVisible({ timeout: 10000 })
+      await expect(tabErrorBadge).toContainText('1')
+
+      // fill out the required array
+      await addArrayRow(page, { fieldName: 'tabWithRequiredArray__requiredArray' })
+      await page.locator('#field-tabWithRequiredArray__requiredArray__0__arrayText').fill('Test')
+
+      // error badge should disappear
+      await expect(tabErrorBadge).toBeHidden()
+    })
+
+    test('tab error badge with unnamed tab and required array field', async ({ page }) => {
+      await page.goto(errorFieldsURL.create)
+      await waitForFormReady(page)
+      await prefillHomeAndHeroTabs(page)
+
+      const unnamedTabButton = page.locator('.tabs-field__tab-button', {
+        hasText: 'Unnamed Tab with Required Array',
+      })
+      await unnamedTabButton.click()
+
+      await saveDocAndAssert(page, '#action-save', 'error')
+
+      // should show the error badge on the tab
+      const tabErrorBadge = page.locator('.tabs-field__tab-button--active .error-pill')
+      await expect(tabErrorBadge).toBeVisible({ timeout: 10000 })
+      await expect(tabErrorBadge).toContainText('1')
+
+      // fill out the required array
+      await addArrayRow(page, { fieldName: 'unnamedRequiredArray' })
+      await page.locator('#field-unnamedRequiredArray__0__arrayText').fill('Test')
+
+      // error badge should disappear
+      await expect(tabErrorBadge).toBeHidden()
+    })
   })
 })

test/field-error-states/payload-types.ts

@@ -106,7 +106,9 @@ export interface Config {
     'global-validate-drafts-on': GlobalValidateDraftsOnSelect<false> | GlobalValidateDraftsOnSelect<true>;
   };
   locale: null;
-  user: User;
+  user: User & {
+    collection: 'users';
+  };
   jobs: {
     tasks: unknown;
     workflows: unknown;
@@ -251,6 +253,16 @@ export interface ErrorField {
         id?: string | null;
       }[]
     | null;
+  tabWithRequiredArray: {
+    requiredArray: {
+      arrayText: string;
+      id?: string | null;
+    }[];
+  };
+  unnamedRequiredArray: {
+    arrayText: string;
+    id?: string | null;
+  }[];
   layout?:
     | {
         tabText: string;
@@ -339,7 +351,6 @@ export interface User {
       }[]
     | null;
   password?: string | null;
-  collection: 'users';
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
@@ -628,6 +639,22 @@ export interface ErrorFieldsSelect<T extends boolean = true> {
         textarea?: T;
         id?: T;
       };
+  tabWithRequiredArray?:
+    | T
+    | {
+        requiredArray?:
+          | T
+          | {
+              arrayText?: T;
+              id?: T;
+            };
+      };
+  unnamedRequiredArray?:
+    | T
+    | {
+        arrayText?: T;
+        id?: T;
+      };
   layout?:
     | T
     | {