fix(ui): prevents column reset on sort (#9517)

Fixes #9492. Sorting columns would unintentionally clear column
preferences.

Author: jacobsfletch

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

@@ -98,7 +98,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
       }
 
       if (updatePreferences && preferenceKey) {
-        await setPreference(preferenceKey, updatedPreferences)
+        await setPreference(preferenceKey, updatedPreferences, true)
       }
 
       const newQuery: ListQuery = {
@@ -151,7 +151,6 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
   const handleSearchChange = useCallback(
     async (arg: string) => {
       const search = arg === '' ? undefined : arg
-
       await refineListData({ search })
     },
     [refineListData],

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

@@ -26,6 +26,7 @@ const description = 'Description'
 
 let payload: PayloadTestSDK<Config>
 
+import { toggleColumn } from 'helpers/e2e/toggleColumn.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -728,6 +729,26 @@ describe('admin2', () => {
         await expect(page.locator('.row-1 .cell-number')).toHaveText('2')
         await expect(page.locator('.row-2 .cell-number')).toHaveText('1')
       })
+
+      test('should sort with existing filters', async () => {
+        await page.goto(postsUrl.list)
+        const column = await toggleColumn(page, { columnLabel: 'ID' })
+        await expect(column).not.toHaveClass('column-selector__column--active')
+        await page.locator('#heading-id').waitFor({ state: 'detached' })
+        await page.locator('#heading-title button.sort-column__asc').click()
+        await page.waitForURL(/sort=title/)
+
+        const columnAfterSort = page.locator(
+          `.list-controls__columns .column-selector .column-selector__column`,
+          {
+            hasText: exactText('ID'),
+          },
+        )
+
+        await expect(columnAfterSort).not.toHaveClass('column-selector__column--active')
+        await expect(page.locator('#heading-id')).toBeHidden()
+        await expect(page.locator('.cell-id')).toHaveCount(0)
+      })
     })
 
     describe('i18n', () => {

test/helpers/e2e/toggleColumn.ts

@@ -0,0 +1,49 @@
+import type { Page } from '@playwright/test'
+
+import { expect } from '@playwright/test'
+
+import { exactText } from '../../helpers.js'
+
+export const toggleColumn = async (
+  page: Page,
+  {
+    togglerSelector = '.list-controls__toggle-columns',
+    columnContainerSelector = '.list-controls__columns',
+    columnLabel,
+  }: {
+    columnContainerSelector?: string
+    columnLabel: string
+    togglerSelector?: string
+  },
+): Promise<any> => {
+  const columnContainer = page.locator(columnContainerSelector).first()
+  const isAlreadyOpen = await columnContainer.isVisible()
+
+  if (!isAlreadyOpen) {
+    await page.locator(togglerSelector).first().click()
+  }
+
+  await expect(page.locator(`${columnContainerSelector}.rah-static--height-auto`)).toBeVisible()
+
+  const column = columnContainer.locator(`.column-selector .column-selector__column`, {
+    hasText: exactText(columnLabel),
+  })
+
+  const isActiveBeforeClick = await column.evaluate((el) =>
+    el.classList.contains('column-selector__column--active'),
+  )
+
+  await expect(column).toBeVisible()
+
+  await column.click()
+
+  if (isActiveBeforeClick) {
+    // no class
+    await expect(column).not.toHaveClass('column-selector__column--active')
+  } else {
+    // has class
+    await expect(column).toHaveClass('column-selector__column--active')
+  }
+
+  return column
+}