fix(ui): list view filter issue when operator and value mismatch

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

@@ -23,6 +23,7 @@ export const RelationshipField: React.FC<Props> = (props) => {
     disabled,
     field: { admin: { isSortable } = {}, hasMany, relationTo },
     onChange,
+    operator,
     value,
   } = props
 
@@ -96,38 +97,40 @@ export const RelationshipField: React.FC<Props> = (props) => {
           })
         }
 
-        try {
-          const response = await fetch(
-            `${serverURL}${api}/${relationSlug}${qs.stringify(query, { addQueryPrefix: true })}`,
-            {
-              credentials: 'include',
-              headers: {
-                'Accept-Language': i18n.language,
+        if (operator) {
+          try {
+            const response = await fetch(
+              `${serverURL}${api}/${relationSlug}${qs.stringify(query, { addQueryPrefix: true })}`,
+              {
+                credentials: 'include',
+                headers: {
+                  'Accept-Language': i18n.language,
+                },
+                signal: abortController.signal,
               },
-              signal: abortController.signal,
-            },
-          )
+            )
 
-          if (response.ok) {
-            const data: PaginatedDocs = await response.json()
-            if (data.docs.length > 0) {
-              addOptions(data, relationSlug)
+            if (response.ok) {
+              const data: PaginatedDocs = await response.json()
+              if (data.docs.length > 0) {
+                addOptions(data, relationSlug)
 
-              if (data.nextPage) {
-                nextPageByRelationshipRef.current.set(relationSlug, data.nextPage)
-              } else {
-                partiallyLoadedRelationshipSlugs.current =
-                  partiallyLoadedRelationshipSlugs.current.filter(
-                    (partiallyLoadedRelation) => partiallyLoadedRelation !== relationSlug,
-                  )
+                if (data.nextPage) {
+                  nextPageByRelationshipRef.current.set(relationSlug, data.nextPage)
+                } else {
+                  partiallyLoadedRelationshipSlugs.current =
+                    partiallyLoadedRelationshipSlugs.current.filter(
+                      (partiallyLoadedRelation) => partiallyLoadedRelation !== relationSlug,
+                    )
+                }
               }
+            } else {
+              setErrorLoading(t('error:unspecific'))
+            }
+          } catch (e) {
+            if (!abortController.signal.aborted) {
+              console.error(e)
             }
-          } else {
-            setErrorLoading(t('error:unspecific'))
-          }
-        } catch (e) {
-          if (!abortController.signal.aborted) {
-            console.error(e)
           }
         }
       }

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

@@ -145,6 +145,7 @@ export const Condition: React.FC<Props> = (props) => {
               isClearable={false}
               onChange={(operator: Option<Operator>) => {
                 setInternalOperatorOption(operator.value)
+                setInternalQueryValue(undefined)
               }}
               options={fieldOption?.operators}
               value={

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

@@ -327,6 +327,29 @@ describe('List View', () => {
       await expect(page.locator('.condition__value input')).toHaveValue('')
     })
 
+    test('should reset query value when operator is changed', async () => {
+      const id = (await page.locator('.cell-id').first().innerText()).replace('ID: ', '')
+      await page.locator('.list-controls__toggle-columns').click()
+      await openListFilters(page, {})
+      await page.locator('.where-builder__add-first-filter').click()
+
+      const operatorField = page.locator('.condition__operator')
+      await operatorField.click()
+
+      const dropdownOperatorOptions = operatorField.locator('.rs__option')
+      await dropdownOperatorOptions.locator('text=equals').click()
+      const valueField = page.locator('.condition__value > input')
+      await valueField.fill(id)
+
+      // change operator to "not equals"
+      await operatorField.click()
+      await dropdownOperatorOptions.locator('text=not equals').click()
+
+      // expect value field to reset (be empty)
+      await expect(valueField.locator('.rs__placeholder')).toContainText('Select a value')
+      await expect(page.locator('.condition__value input')).toHaveValue('')
+    })
+
     test('should accept where query from valid URL where parameter', async () => {
       // delete all posts created by the seed
       await deleteAllPosts()