fix(ui): relationship filter duplicate options when switching operators (#16204)

Fixes #15947

## Summary
- Fixes duplicate options appearing in relationship filter dropdowns
when switching operators
- The `reduceToIDs` function was incorrectly using `option.id` (which
doesn't exist on the Option type) instead of `option.value` for
deduplication

## Test plan
- [x] Unit tests added for optionsReducer deduplication logic
- [x] E2E test added that verifies no duplicate options when switching
operators

Continuation from #16029 which
was from a fork of payload that was archived.

Co-authored-by: https://github.com/howwohmm

---------

Co-authored-by: OM MISHRA <152969928+howwohmm@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 3 people

packages/ui/src/elements/WhereBuilder/Condition/Relationship/optionsReducer.spec.ts

@@ -0,0 +1,132 @@
+import { describe, expect, it } from 'vitest'
+
+import optionsReducer from './optionsReducer.js'
+import type { Option } from './types.js'
+
+const mockI18n = {
+  t: (key: string) => key,
+} as any
+
+const mockCollection = {
+  admin: { useAsTitle: 'title' },
+  labels: { plural: 'Posts' },
+} as any
+
+describe('optionsReducer', () => {
+  describe('ADD — single relation', () => {
+    it('deduplicates options when the same doc is loaded twice', () => {
+      const initial: Option[] = [{ label: 'Post A', value: 'id-1' }]
+
+      const result = optionsReducer(initial, {
+        type: 'ADD',
+        collection: mockCollection,
+        data: {
+          docs: [
+            { id: 'id-1', title: 'Post A' }, // already in state
+            { id: 'id-2', title: 'Post B' }, // new
+          ],
+          totalDocs: 2,
+          limit: 10,
+          totalPages: 1,
+          page: 1,
+          pagingCounter: 1,
+          hasPrevPage: false,
+          hasNextPage: false,
+          prevPage: null,
+          nextPage: null,
+        },
+        hasMultipleRelations: false,
+        i18n: mockI18n,
+        relation: 'posts',
+      })
+
+      expect(result).toHaveLength(2)
+      expect(result.map((o) => o.value)).toEqual(['id-1', 'id-2'])
+    })
+
+    it('appends all docs when state is empty', () => {
+      const result = optionsReducer([], {
+        type: 'ADD',
+        collection: mockCollection,
+        data: {
+          docs: [
+            { id: 'id-1', title: 'Post A' },
+            { id: 'id-2', title: 'Post B' },
+          ],
+          totalDocs: 2,
+          limit: 10,
+          totalPages: 1,
+          page: 1,
+          pagingCounter: 1,
+          hasPrevPage: false,
+          hasNextPage: false,
+          prevPage: null,
+          nextPage: null,
+        },
+        hasMultipleRelations: false,
+        i18n: mockI18n,
+        relation: 'posts',
+      })
+
+      expect(result).toHaveLength(2)
+    })
+  })
+
+  describe('ADD — multiple relations (grouped options)', () => {
+    it('deduplicates sub-options within a group when the same doc is loaded twice', () => {
+      const initial: Option[] = [
+        {
+          label: 'Posts',
+          value: undefined as any,
+          options: [{ label: 'Post A', value: 'id-1', relationTo: 'posts' }],
+        },
+      ]
+
+      const result = optionsReducer(initial, {
+        type: 'ADD',
+        collection: { ...mockCollection, labels: { plural: 'Posts' } },
+        data: {
+          docs: [
+            { id: 'id-1', title: 'Post A' }, // duplicate
+            { id: 'id-2', title: 'Post B' }, // new
+          ],
+          totalDocs: 2,
+          limit: 10,
+          totalPages: 1,
+          page: 1,
+          pagingCounter: 1,
+          hasPrevPage: false,
+          hasNextPage: false,
+          prevPage: null,
+          nextPage: null,
+        },
+        hasMultipleRelations: true,
+        i18n: { t: () => 'Posts' } as any,
+        relation: 'posts',
+      })
+
+      const group = result.find((o) => o.options)
+      expect(group?.options).toHaveLength(2)
+      expect(group?.options?.map((o) => o.value)).toEqual(['id-1', 'id-2'])
+    })
+  })
+
+  describe('CLEAR', () => {
+    it('returns empty array when field is required', () => {
+      const result = optionsReducer(
+        [{ label: 'Post A', value: 'id-1' }],
+        { type: 'CLEAR', required: true, i18n: mockI18n },
+      )
+      expect(result).toEqual([])
+    })
+
+    it('returns none option when field is not required', () => {
+      const result = optionsReducer(
+        [{ label: 'Post A', value: 'id-1' }],
+        { type: 'CLEAR', required: false, i18n: mockI18n },
+      )
+      expect(result).toHaveLength(1)
+      expect(result[0]?.value).toBe('null')
+    })
+  })
+})

packages/ui/src/elements/WhereBuilder/Condition/Relationship/optionsReducer.ts

@@ -9,7 +9,7 @@ const reduceToIDs = (options) =>
       return [...ids, ...reduceToIDs(option.options)]
     }
 
-    return [...ids, option.id]
+    return [...ids, option.value]
   }, [])
 
 const optionsReducer = (state: Option[], action: Action): Option[] => {

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

@@ -3,10 +3,11 @@ import type { Page } from '@playwright/test'
 import { expect, test } from '@playwright/test'
 import { checkFocusIndicators } from '__helpers/e2e/checkFocusIndicators.js'
 import { openCreateDocDrawer } from '__helpers/e2e/fields/relationship/openCreateDocDrawer.js'
-import { addListFilter } from '__helpers/e2e/filters/index.js'
+import { addListFilter, openListFilters } from '__helpers/e2e/filters/index.js'
 import { navigateToDoc } from '__helpers/e2e/navigateToDoc.js'
 import { openDocControls } from '__helpers/e2e/openDocControls.js'
 import { runAxeScan } from '__helpers/e2e/runAxeScan.js'
+import { getSelectInputOptions, selectInput } from '__helpers/e2e/selectInput.js'
 import { openDocDrawer } from '__helpers/e2e/toggleDocDrawer.js'
 import path from 'path'
 import { wait } from 'payload/shared'
@@ -24,8 +25,8 @@ import {
 } from '../../../__helpers/e2e/helpers.js'
 import { AdminUrlUtil } from '../../../__helpers/shared/adminUrlUtil.js'
 import { assertToastErrors } from '../../../__helpers/shared/assertToastErrors.js'
-import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../../../__helpers/shared/clearAndSeed/reInitializeDB.js'
+import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
 import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 import { relationshipFieldsSlug, textFieldsSlug } from '../../slugs.js'
 
@@ -795,6 +796,58 @@ describe('relationship', () => {
     await expect(page.locator(tableRowLocator)).toHaveCount(1)
   })
 
+  test('should not duplicate relationship filter options when switching operators', async () => {
+    await page.goto(url.list)
+    await wait(1000)
+
+    await openListFilters(page, {})
+    const whereBuilder = page.locator('.where-builder')
+
+    // Add first filter
+    await whereBuilder.locator('.where-builder__add-first-filter').click()
+    const condition = whereBuilder.locator('.where-builder__or-filters > li').last()
+
+    // Select relationship field
+    await selectInput({
+      selectLocator: condition.locator('.condition__field'),
+      multiSelect: false,
+      option: 'Relationship',
+    })
+
+    // Select equals operator (default)
+    await selectInput({
+      selectLocator: condition.locator('.condition__operator'),
+      multiSelect: false,
+      option: 'equals',
+    })
+
+    // Select a value
+    const valueLocator = condition.locator('.condition__value')
+    await selectInput({
+      selectLocator: valueLocator,
+      multiSelect: false,
+      option: 'Seeded text document',
+      selectType: 'relationship',
+    })
+
+    // Switch to "is not equal to" operator
+    await selectInput({
+      selectLocator: condition.locator('.condition__operator'),
+      multiSelect: false,
+      option: 'is not equal to',
+    })
+
+    // Wait for options to reload
+    await wait(500)
+
+    // Get all options in the value dropdown
+    const options = await getSelectInputOptions({ selectLocator: valueLocator })
+
+    // Verify no duplicates - each option should appear only once
+    const uniqueOptions = [...new Set(options)]
+    expect(options.length).toBe(uniqueOptions.length)
+  })
+
   test('should be able to select relationship with drawer appearance', async () => {
     await loadCreatePage()