fix(ui): hide entire tabs field when admin.condition is false (#16809)

jacobsfletch · web-flow · commit 79b4e4c6db70 · 2026-06-01T12:17:40.000-04:00
Identical to #16799, back-ported for 3.x.
diff --git a/packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts b/packages/ui/src/forms/fieldSchemasToFormState/addFieldStatePromise.ts
@@ -947,6 +947,16 @@ export const addFieldStatePromise = async (args: AddFieldStatePromiseArgs): Prom
       state,
     })
   } else if (field.type === 'tabs') {
+    if (!filter || filter(args)) {
+      state[path] = {
+        disableFormData: true,
+      }
+
+      if (passesCondition === false) {
+        state[path].passesCondition = false
+      }
+    }
+
     return iterateFields({
       id,
       addErrorPathToParent: addErrorPathToParentArg,
diff --git a/test/fields/collections/ConditionalLogic/e2e.spec.ts b/test/fields/collections/ConditionalLogic/e2e.spec.ts
@@ -289,6 +289,25 @@ describe('Conditional Logic', () => {
     await expect(fieldWithOperationCondition).toBeHidden()
   })
 
+  test('should hide entire tabs field UI when admin.condition is false', async () => {
+    await page.goto(url.create)
+
+    const tabsField = page.locator('.tabs-field').filter({
+      has: page.locator('button:has-text("Tab With Condition 1")'),
+    })
+
+    await expect(tabsField).toBeHidden()
+
+    const enableTabsToggle = page.locator('label[for=field-enableTabs]')
+    await enableTabsToggle.click()
+
+    await expect(tabsField).toBeVisible()
+    await expect(tabsField.locator('button:has-text("Tab With Condition 1")')).toBeVisible()
+
+    await enableTabsToggle.click()
+    await expect(tabsField).toBeHidden()
+  })
+
   test('should toggle conditional field when radio changes inside a block', async () => {
     await page.goto(url.create)
 
diff --git a/test/fields/collections/ConditionalLogic/index.ts b/test/fields/collections/ConditionalLogic/index.ts
@@ -231,6 +231,38 @@ const ConditionalLogic: CollectionConfig = {
         },
       ],
     },
+    {
+      name: 'enableTabs',
+      type: 'checkbox',
+    },
+    {
+      type: 'tabs',
+      admin: {
+        condition: ({ enableTabs }) => Boolean(enableTabs),
+      },
+      tabs: [
+        {
+          label: 'Tab With Condition 1',
+          description: 'Description for conditional tab 1',
+          fields: [
+            {
+              name: 'conditionalTabsField1',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          label: 'Tab With Condition 2',
+          description: 'Description for conditional tab 2',
+          fields: [
+            {
+              name: 'conditionalTabsField2',
+              type: 'text',
+            },
+          ],
+        },
+      ],
+    },
     {
       name: 'arrayOne',
       type: 'array',
diff --git a/test/fields/payload-types.ts b/test/fields/payload-types.ts
@@ -984,6 +984,9 @@ export interface ConditionalLogic {
         blockType: 'blockWithRadioCondition';
       }[]
     | null;
+  enableTabs?: boolean | null;
+  conditionalTabsField1?: string | null;
+  conditionalTabsField2?: string | null;
   arrayOne?:
     | {
         title?: string | null;
@@ -2845,6 +2848,9 @@ export interface ConditionalLogicSelect<T extends boolean = true> {
               blockName?: T;
             };
       };
+  enableTabs?: T;
+  conditionalTabsField1?: T;
+  conditionalTabsField2?: T;
   arrayOne?:
     | T
     | {
diff --git a/test/form-state/int.spec.ts b/test/form-state/int.spec.ts
@@ -138,6 +138,12 @@ describe('Form State', () => {
     })
 
     expect(state).toStrictEqual({
+      '_index-7': {
+        disableFormData: true,
+      },
+      '_index-7-0-0': {
+        disableFormData: true,
+      },
       title: {
         value: postData.title,
         initialValue: postData.title,
