From 7a73265bd68fdc466e82d47f12204ebefd85a7c1 Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Thu, 6 Feb 2025 17:44:32 -0500
Subject: [PATCH] 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.
---
 .../elements/WhereBuilder/Condition/index.tsx | 21 +++++++++++++------
 test/admin/e2e/list-view/e2e.spec.ts          | 19 +++++++++++++++++
 tsconfig.base.json                            |  2 +-
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/elements/WhereBuilder/Condition/index.tsx b/packages/ui/src/elements/WhereBuilder/Condition/index.tsx
index 3100cf5072..2676080a58 100644
--- a/packages/ui/src/elements/WhereBuilder/Condition/index.tsx
+++ b/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 =
diff --git a/test/admin/e2e/list-view/e2e.spec.ts b/test/admin/e2e/list-view/e2e.spec.ts
index 2ea8403fb5..2ecc2333b7 100644
--- a/test/admin/e2e/list-view/e2e.spec.ts
+++ b/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()
diff --git a/tsconfig.base.json b/tsconfig.base.json
index fba7b319e9..c461af5dcb 100644
--- a/tsconfig.base.json
+++ b/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"],