fix(ui): clearing value from relationship filter leaves stale query (#11023)

When filtering the list view using conditions on a relationship field,
clearing the value from the field would leave it in the query despite
being removed from the component.

Author: jacobsfletch

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

@@ -76,12 +76,20 @@ export const Condition: React.FC<Props> = (props) => {
   const debouncedValue = useDebounce(internalQueryValue, 300)
 
   useEffect(() => {
-    // This is to trigger changes when the debounced value changes
-    if (
-      (fieldOption?.value || typeof fieldOption?.value === 'number') &&
-      internalOperatorOption &&
-      ![null, undefined].includes(debouncedValue)
-    ) {
+    if (debouncedValue === undefined) {
+      return
+    }
+
+    if (debouncedValue === null) {
+      removeCondition({
+        andIndex,
+        orIndex,
+      })
+
+      return
+    }
+
+    if ((fieldOption?.value || typeof fieldOption?.value === 'number') && internalOperatorOption) {
       updateCondition({
         andIndex,
         fieldName: fieldOption.value,
@@ -98,6 +106,7 @@ export const Condition: React.FC<Props> = (props) => {
     orIndex,
     updateCondition,
     operator,
+    removeCondition,
   ])
 
   const booleanSelect =

test/admin/e2e/list-view/e2e.spec.ts

@@ -44,6 +44,7 @@ import { reorderColumns } from '../../../helpers/e2e/reorderColumns.js'
 import { reInitializeDB } from '../../../helpers/reInitializeDB.js'
 import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 import { addListFilter } from 'helpers/e2e/addListFilter.js'
+
 const filename = fileURLToPath(import.meta.url)
 const currentFolder = path.dirname(filename)
 const dirname = path.resolve(currentFolder, '../../')
@@ -356,6 +357,24 @@ describe('List View', () => {
       await expect(page.locator('.condition__value input')).toHaveValue('')
     })
 
+    test('should remove condition from URL when value is cleared', async () => {
+      await page.goto(postsUrl.list)
+
+      await addListFilter({
+        page,
+        fieldLabel: 'Relationship',
+        operatorLabel: 'equals',
+        value: 'post1',
+      })
+
+      await page.waitForURL(/&where/)
+
+      const valueInput = page.locator('.condition__value')
+      const removeButton = valueInput.locator('.clear-indicator').click()
+
+      await page.waitForURL(/^(?!.*&where)/)
+    })
+
     test('should accept where query from valid URL where parameter', async () => {
       // delete all posts created by the seed
       await deleteAllPosts()

tsconfig.base.json

@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/fields/config.ts"],
+      "@payload-config": ["./test/admin/config.ts"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
       "@payloadcms/live-preview-vue": ["./packages/live-preview-vue/src/index.ts"],