fix(ui): ensures admin.disableListFilter is disabled despite url search params (#9874)

Continuation of #9846 and partial fix for #9774. When setting
`admin.disableListFilter` retroactively, it remains active within the
list filter controls. Same for when the URL search query contains one of
these fields, except this will actually display the _wrong_ field,
falling back to the _first_ field from the config. The fix is to
properly disable the condition for this field if it's an active filter,
while still preventing it from ever rendering as an option within the
field selector itself.

Author: jacobsfletch

packages/ui/src/elements/WhereBuilder/Condition/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
 import type { FieldCondition } from '../types.js'
 
@@ -64,6 +64,11 @@ export const Condition: React.FC<Props> = (props) => {
     RenderedFilter,
     updateCondition,
   } = props
+
+  const options = useMemo(() => {
+    return fields.filter(({ field }) => !field.admin.disableListFilter)
+  }, [fields])
+
   const [internalField, setInternalField] = useState<FieldCondition>(() =>
     fields.find((field) => fieldName === field.value),
   )
@@ -113,25 +118,34 @@ export const Condition: React.FC<Props> = (props) => {
     valueOptions = internalField.field.options
   }
 
+  const disabled =
+    (!internalField?.value && typeof internalField?.value !== 'number') ||
+    internalField?.field?.admin?.disableListFilter
+
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__wrap`}>
         <div className={`${baseClass}__inputs`}>
           <div className={`${baseClass}__field`}>
             <ReactSelect
+              disabled={disabled}
               isClearable={false}
               onChange={(field: Option) => {
                 setInternalField(fields.find((f) => f.value === field.value))
                 setInternalOperatorOption(undefined)
                 setInternalQueryValue(undefined)
               }}
-              options={fields}
-              value={fields.find((field) => internalField?.value === field.value) || fields[0]}
+              options={options}
+              value={
+                fields.find((field) => internalField?.value === field.value) || {
+                  value: internalField?.value,
+                }
+              }
             />
           </div>
           <div className={`${baseClass}__operator`}>
             <ReactSelect
-              disabled={!internalField?.value && typeof internalField?.value !== 'number'}
+              disabled={disabled}
               isClearable={false}
               onChange={(operator: Option<Operator>) => {
                 setInternalOperatorOption(operator.value)
@@ -148,7 +162,7 @@ export const Condition: React.FC<Props> = (props) => {
             {RenderedFilter || (
               <DefaultFilter
                 booleanSelect={booleanSelect}
-                disabled={!internalOperatorOption}
+                disabled={!internalOperatorOption || internalField?.field?.admin?.disableListFilter}
                 internalField={internalField}
                 onChange={setInternalQueryValue}
                 operator={internalOperatorOption}

packages/ui/src/elements/WhereBuilder/reduceClientFields.tsx

@@ -29,7 +29,7 @@ export const reduceClientFields = ({
   pathPrefix,
 }: ReduceClientFieldsArgs): FieldCondition[] => {
   return fields.reduce((reduced, field) => {
-    if (field.admin?.disableListFilter || (fieldIsHiddenOrDisabled(field) && !fieldIsID(field))) {
+    if (fieldIsHiddenOrDisabled(field) && !fieldIsID(field)) {
       return reduced
     }
 

packages/ui/src/providers/ListQuery/index.tsx

@@ -124,17 +124,19 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
       }
     },
     [
-      modifySearchParams,
       currentQuery?.page,
       currentQuery?.limit,
+      currentQuery?.search,
       currentQuery?.sort,
       currentQuery?.where,
-      currentQuery?.search,
       preferenceKey,
-      router,
-      setPreference,
+      defaultLimit,
+      defaultSort,
+      modifySearchParams,
       onQueryChange,
       onQueryChangeFromProps,
+      setPreference,
+      router,
     ],
   )
 

test/admin/e2e/2/e2e.spec.ts

@@ -26,8 +26,10 @@ const description = 'Description'
 
 let payload: PayloadTestSDK<Config>
 
-import { goToFirstCell, navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
-import { openListColumns, toggleColumn } from 'helpers/e2e/toggleColumn.js'
+import { goToFirstCell } from 'helpers/e2e/navigateToDoc.js'
+import { openListColumns } from 'helpers/e2e/openListColumns.js'
+import { openListFilters } from 'helpers/e2e/openListFilters.js'
+import { toggleColumn } from 'helpers/e2e/toggleColumn.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -273,9 +275,7 @@ describe('admin2', () => {
 
         await expect(page.locator(tableRowLocator)).toHaveCount(2)
 
-        await page.locator('.list-controls__toggle-where').click()
-        // wait until the filter UI is visible and fully expanded
-        await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
+        await openListFilters(page, {})
 
         await page.locator('.where-builder__add-first-filter').click()
 
@@ -313,8 +313,7 @@ describe('admin2', () => {
 
         // open the column controls
         await page.locator('.list-controls__toggle-columns').click()
-        await page.locator('.list-controls__toggle-where').click()
-        await page.waitForSelector('.list-controls__where.rah-static--height-auto')
+        await openListFilters(page, {})
         await page.locator('.where-builder__add-first-filter').click()
 
         const operatorField = page.locator('.condition__operator')
@@ -461,7 +460,7 @@ describe('admin2', () => {
         await page.goto(`${postsUrl.list}?limit=10&page=2`)
 
         // add filter
-        await page.locator('.list-controls__toggle-where').click()
+        await openListFilters(page, {})
         await page.locator('.where-builder__add-first-filter').click()
         await page.locator('.condition__field .rs__control').click()
         const options = page.locator('.rs__option')
@@ -776,7 +775,7 @@ describe('admin2', () => {
         ).toHaveText('Title')
 
         // filters
-        await page.locator('.list-controls__toggle-where').click()
+        await openListFilters(page, {})
         await page.locator('.where-builder__add-first-filter').click()
         await page.locator('.condition__field .rs__control').click()
         const options = page.locator('.rs__option')

test/fields-relationship/e2e.spec.ts

@@ -2,6 +2,7 @@ import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
 import { openDocControls } from 'helpers/e2e/openDocControls.js'
+import { openListFilters } from 'helpers/e2e/openListFilters.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -485,8 +486,7 @@ describe('fields - relationship', () => {
     await page.goto(versionedRelationshipFieldURL.list)
 
     await page.locator('.list-controls__toggle-columns').click()
-    await page.locator('.list-controls__toggle-where').click()
-    await page.waitForSelector('.list-controls__where.rah-static--height-auto')
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const conditionField = page.locator('.condition__field')

test/fields/collections/Email/e2e.spec.ts

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { openListFilters } from 'helpers/e2e/openListFilters.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -89,7 +90,7 @@ describe('Email', () => {
 
   test('should show field in filter when admin.disableListColumn is true', async () => {
     await page.goto(url.list)
-    await page.locator('.list-controls__toggle-where').click()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const initialField = page.locator('.condition__field')
@@ -100,7 +101,7 @@ describe('Email', () => {
     ).toBeVisible()
   })
 
-  test('should display field in list view column selector if admin.disableListColumn is false and admin.disableListFilter is true', async () => {
+  test('should display field in list view column selector despite admin.disableListFilter', async () => {
     await page.goto(url.list)
     await page.locator('.list-controls__toggle-columns').click()
 
@@ -116,7 +117,7 @@ describe('Email', () => {
 
   test('should hide field in filter when admin.disableListFilter is true', async () => {
     await page.goto(url.list)
-    await page.locator('.list-controls__toggle-where').click()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const initialField = page.locator('.condition__field')
@@ -188,8 +189,7 @@ describe('Email', () => {
     await page.goto(url.list)
 
     // open the first filter options
-    await page.locator('.list-controls__toggle-where').click()
-    await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const firstInitialField = page.locator('.condition__field')
@@ -230,8 +230,7 @@ describe('Email', () => {
     await page.goto(url.list)
 
     // open the first filter options
-    await page.locator('.list-controls__toggle-where').click()
-    await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const firstInitialField = page.locator('.condition__field')
@@ -261,8 +260,7 @@ describe('Email', () => {
     await page.goto(url.list)
 
     // open the first filter options
-    await page.locator('.list-controls__toggle-where').click()
-    await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const firstInitialField = page.locator('.condition__field')

test/fields/collections/Number/e2e.spec.ts

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { openListFilters } from 'helpers/e2e/openListFilters.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -73,8 +74,7 @@ describe('Number', () => {
   test('should filter Number fields in the collection view - greaterThanOrEqual', async () => {
     await page.goto(url.list)
     await expect(page.locator('table >> tbody >> tr')).toHaveCount(3)
-    await page.locator('.list-controls__toggle-where').click()
-    await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
     const initialField = page.locator('.condition__field')
     const operatorField = page.locator('.condition__operator')

test/fields/collections/Relationship/e2e.spec.ts

@@ -3,6 +3,7 @@ import type { Page } from '@playwright/test'
 import { expect, test } from '@playwright/test'
 import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
 import { openDocControls } from 'helpers/e2e/openDocControls.js'
+import { openListFilters } from 'helpers/e2e/openListFilters.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -614,8 +615,7 @@ describe('relationship', () => {
     await page.locator('.list-controls__toggle-columns').click()
     await wait(400)
 
-    await page.locator('.list-controls__toggle-where').click()
-    await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
+    await openListFilters(page, {})
     await wait(400)
 
     await page.locator('.where-builder__add-first-filter').click()

test/fields/collections/Text/e2e.spec.ts

@@ -2,10 +2,13 @@ import type { Page } from '@playwright/test'
 import type { GeneratedTypes } from 'helpers/sdk/types.js'
 
 import { expect, test } from '@playwright/test'
-import { openListColumns, toggleColumn } from 'helpers/e2e/toggleColumn.js'
+import { openListColumns } from 'helpers/e2e/openListColumns.js'
+import { openListFilters } from 'helpers/e2e/openListFilters.js'
+import { toggleColumn } from 'helpers/e2e/toggleColumn.js'
 import { upsertPrefs } from 'helpers/e2e/upsertPrefs.js'
 import path from 'path'
 import { wait } from 'payload/shared'
+import * as qs from 'qs-esm'
 import { fileURLToPath } from 'url'
 
 import type { PayloadTestSDK } from '../../../helpers/sdk/index.js'
@@ -180,7 +183,7 @@ describe('Text', () => {
 
   test('should show field in filter when admin.disableListColumn is true', async () => {
     await page.goto(url.list)
-    await page.locator('.list-controls__toggle-where').click()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const initialField = page.locator('.condition__field')
@@ -191,7 +194,7 @@ describe('Text', () => {
     ).toBeVisible()
   })
 
-  test('should display field in list view column selector if admin.disableListColumn is false and admin.disableListFilter is true', async () => {
+  test('should display field in list view column selector despite admin.disableListFilter', async () => {
     await page.goto(url.list)
     await page.locator('.list-controls__toggle-columns').click()
 
@@ -205,6 +208,43 @@ describe('Text', () => {
     ).toBeVisible()
   })
 
+  test('should disable field when admin.disableListFilter is true but still exists in the query', async () => {
+    await page.goto(
+      `${url.list}${qs.stringify(
+        {
+          where: {
+            or: [
+              {
+                and: [
+                  {
+                    disableListFilterText: {
+                      equals: 'Disable List Filter Text',
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        },
+        { addQueryPrefix: true },
+      )}`,
+    )
+
+    await openListFilters(page, {})
+
+    const condition = page.locator('.condition__field')
+    await expect(condition.locator('input.rs__input')).toBeDisabled()
+    await expect(page.locator('.condition__operator input.rs__input')).toBeDisabled()
+    await expect(page.locator('.condition__value input.condition-value-text')).toBeDisabled()
+    await expect(condition.locator('.rs__single-value')).toHaveText('Disable List Filter Text')
+    await page.locator('button.condition__actions-add').click()
+    const condition2 = page.locator('.condition__field').nth(1)
+    await condition2.click()
+    await expect(
+      condition2?.locator('.rs__menu-list:has-text("Disable List Filter Text")'),
+    ).toBeHidden()
+  })
+
   test('should respect admin.disableListColumn despite preferences', async () => {
     await upsertPrefs<Config, GeneratedTypes<any>>({
       payload,
@@ -233,7 +273,7 @@ describe('Text', () => {
 
   test('should hide field in filter when admin.disableListFilter is true', async () => {
     await page.goto(url.list)
-    await page.locator('.list-controls__toggle-where').click()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const initialField = page.locator('.condition__field')
@@ -298,8 +338,7 @@ describe('Text', () => {
     await page.goto(url.list)
 
     // open the first filter options
-    await page.locator('.list-controls__toggle-where').click()
-    await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const firstInitialField = page.locator('.condition__field')
@@ -340,8 +379,7 @@ describe('Text', () => {
     await page.goto(url.list)
 
     // open the first filter options
-    await page.locator('.list-controls__toggle-where').click()
-    await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const firstInitialField = page.locator('.condition__field')
@@ -371,8 +409,7 @@ describe('Text', () => {
     await page.goto(url.list)
 
     // open the first filter options
-    await page.locator('.list-controls__toggle-where').click()
-    await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
+    await openListFilters(page, {})
     await page.locator('.where-builder__add-first-filter').click()
 
     const firstInitialField = page.locator('.condition__field')