fix: page param not getting reset when applying filters (#7243)

Closes #7188

In the collection list view, after adding a filter, the page number
should be reset since the doc count will have changed.

---------

Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>

Author: jessrynkar

packages/ui/src/elements/SortColumn/index.tsx

@@ -37,8 +37,8 @@ export const SortColumn: React.FC<SortColumnProps> = (props) => {
   if (sort === desc) descClasses.push(`${baseClass}--active`)
 
   const setSort = useCallback(
-    (newSort) => {
-      refineListData({
+    async (newSort: string) => {
+      await refineListData({
         sort: newSort,
       })
     },
@@ -56,7 +56,7 @@ export const SortColumn: React.FC<SortColumnProps> = (props) => {
               label,
             })}
             className={[...ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}
-            onClick={() => setSort(asc)}
+            onClick={() => void setSort(asc)}
             type="button"
           >
             <ChevronIcon direction="up" />
@@ -67,7 +67,7 @@ export const SortColumn: React.FC<SortColumnProps> = (props) => {
               label,
             })}
             className={[...descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}
-            onClick={() => setSort(desc)}
+            onClick={() => void setSort(desc)}
             type="button"
           >
             <ChevronIcon />

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

@@ -143,8 +143,11 @@ export const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {
 
   React.useEffect(() => {
     if (shouldUpdateQuery) {
-      handleWhereChange({ or: conditions })
-      setShouldUpdateQuery(false)
+      async function handleChange() {
+        await handleWhereChange({ or: conditions })
+        setShouldUpdateQuery(false)
+      }
+      void handleChange()
     }
   }, [conditions, handleWhereChange, shouldUpdateQuery])
 

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

@@ -13,12 +13,19 @@ import { useSearchParams } from '../SearchParams/index.js'
 
 export type ColumnPreferences = Pick<Column, 'accessor' | 'active'>[]
 
-type Handlers = {
-  handlePageChange?: (page: number) => void
-  handlePerPageChange?: (limit: number) => void
-  handleSearchChange?: (search: string) => void
-  handleSortChange?: (sort: string) => void
-  handleWhereChange?: (where: Where) => void
+type PropHandlers = {
+  handlePageChange?: (page: number) => Promise<void> | void
+  handlePerPageChange?: (limit: number) => Promise<void> | void
+  handleSearchChange?: (search: string) => Promise<void> | void
+  handleSortChange?: (sort: string) => Promise<void> | void
+  handleWhereChange?: (where: Where) => Promise<void> | void
+}
+type ContextHandlers = {
+  handlePageChange?: (page: number) => Promise<void>
+  handlePerPageChange?: (limit: number) => Promise<void>
+  handleSearchChange?: (search: string) => Promise<void>
+  handleSortChange?: (sort: string) => Promise<void>
+  handleWhereChange?: (where: Where) => Promise<void>
 }
 
 export type ListQueryProps = {
@@ -28,14 +35,14 @@ export type ListQueryProps = {
   defaultSort?: string
   modifySearchParams?: boolean
   preferenceKey?: string
-} & Handlers
+} & PropHandlers
 
 export type ListQueryContext = {
   data: PaginatedDocs
   defaultLimit?: number
   defaultSort?: string
-  refineListData: (args: RefineOverrides) => void
-} & Handlers
+  refineListData: (args: RefineOverrides) => Promise<void>
+} & ContextHandlers
 
 const Context = createContext({} as ListQueryContext)
 
@@ -71,6 +78,9 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
     async (query: RefineOverrides) => {
       if (!modifySearchParams) return
 
+      let pageQuery = 'page' in query ? query.page : currentQuery?.page
+      if ('where' in query || 'search' in query) pageQuery = '1'
+
       const updatedPreferences: Record<string, unknown> = {}
       let updatePreferences = false
 
@@ -88,7 +98,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
 
       const params = {
         limit: 'limit' in query ? query.limit : currentQuery?.limit,
-        page: 'page' in query ? query.page : currentQuery?.page,
+        page: pageQuery,
         search: 'search' in query ? query.search : currentQuery?.search,
         sort: 'sort' in query ? query.sort : currentQuery?.sort,
         where: 'where' in query ? query.where : currentQuery?.where,
@@ -102,7 +112,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
   const handlePageChange = React.useCallback(
     async (arg: number) => {
       if (typeof handlePageChangeFromProps === 'function') {
-        handlePageChangeFromProps(arg)
+        await handlePageChangeFromProps(arg)
       }
       await refineListData({ page: String(arg) })
     },
@@ -111,7 +121,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
   const handlePerPageChange = React.useCallback(
     async (arg: number) => {
       if (typeof handlePerPageChangeFromProps === 'function') {
-        handlePerPageChangeFromProps(arg)
+        await handlePerPageChangeFromProps(arg)
       }
       await refineListData({ limit: String(arg) })
     },
@@ -120,7 +130,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
   const handleSearchChange = React.useCallback(
     async (arg: string) => {
       if (typeof handleSearchChangeFromProps === 'function') {
-        handleSearchChangeFromProps(arg)
+        await handleSearchChangeFromProps(arg)
       }
       await refineListData({ search: arg })
     },
@@ -129,7 +139,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
   const handleSortChange = React.useCallback(
     async (arg: string) => {
       if (typeof handleSortChangeFromProps === 'function') {
-        handleSortChangeFromProps(arg)
+        await handleSortChangeFromProps(arg)
       }
       await refineListData({ sort: arg })
     },
@@ -138,7 +148,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
   const handleWhereChange = React.useCallback(
     async (arg: Where) => {
       if (typeof handleWhereChangeFromProps === 'function') {
-        handleWhereChangeFromProps(arg)
+        await handleWhereChangeFromProps(arg)
       }
       await refineListData({ where: arg })
     },

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

@@ -421,6 +421,42 @@ describe('admin2', () => {
         await expect(page.getByPlaceholder('Enter a value')).toHaveValue('[object Object]')
         await expect(page.locator(tableRowLocator)).toHaveCount(1)
       })
+
+      test('should reset page when filters are applied', async () => {
+        await deleteAllPosts()
+        await mapAsync([...Array(6)], async () => {
+          await createPost()
+        })
+        await page.reload()
+        await mapAsync([...Array(6)], async () => {
+          await createPost({ title: 'test' })
+        })
+        await page.reload()
+
+        const pageInfo = page.locator('.collection-list__page-info')
+        const perPage = page.locator('.per-page')
+        const tableItems = page.locator(tableRowLocator)
+
+        await expect(tableItems).toHaveCount(10)
+        await expect(pageInfo).toHaveText('1-10 of 12')
+        await expect(perPage).toContainText('Per Page: 10')
+
+        // go to page 2
+        await page.goto(`${postsUrl.list}?limit=10&page=2`)
+
+        // add filter
+        await page.locator('.list-controls__toggle-where').click()
+        await page.locator('.where-builder__add-first-filter').click()
+        await page.locator('.condition__field .rs__control').click()
+        const options = page.locator('.rs__option')
+        await options.locator('text=Tab 1 > Title').click()
+        await page.locator('.condition__operator .rs__control').click()
+        await options.locator('text=equals').click()
+        await page.locator('.condition__value input').fill('test')
+
+        // expect to be on page 1
+        await expect(pageInfo).toHaveText('1-6 of 6')
+      })
     })
 
     describe('table columns', () => {