From b750ba450917daf37d63ed5feaa67637f93318e5 Mon Sep 17 00:00:00 2001
From: Corey Larson <coreyleelarson@gmail.com>
Date: Fri, 18 Apr 2025 05:10:48 -0500
Subject: [PATCH] fix(ui): reflect default sort in join tables (#12084)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

Thank you for the PR! Please go through the checklist below and make
sure you've completed all the steps.

Please review the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository if you haven't already.

The following items will ensure that your PR is handled as smoothly as
possible:

- PR Title must follow conventional commits format. For example, `feat:
my new feature`, `fix(plugin-seo): my fix`.
- Minimal description explained as if explained to someone not
immediately familiar with the code.
- Provide before/after screenshots or code diffs if applicable.
- Link any related issues/discussions from GitHub or Discord.
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Fixes #

-->

### What?

This PR ensures defaultSort is reflected in join tables.

### Why?

Currently, default sort is not reflected in the join table state. The
data _is_ sorted correctly, but the table state sort is undefined. This
is mainly an issue for join fields with `orderable: true` because you
can't re-order the table until `order` is the selected sort column.

### How?

Added `defaultSort` prop to the `<ListQueryProvider />` in the
`<RelationshipTable />` and ensured the default state gets set in
`<ListQueryProvider />` when `modifySearchParams` is false.

**Before:**

<img width="1390" alt="Screenshot 2025-04-11 at 2 33 19 AM"
src="https://github.com/user-attachments/assets/4a008d98-d308-4397-a35a-69795e5a6070"
/>

**After:**

<img width="1362" alt="Screenshot 2025-04-11 at 3 04 07 AM"
src="https://github.com/user-attachments/assets/4748e354-36e4-451f-83e8-6f84fe58d5b5"
/>

Fixes #12083

---------

Co-authored-by: Germán Jabloñski <43938777+GermanJablo@users.noreply.github.com>
---
 packages/ui/src/elements/RelationshipTable/index.tsx | 1 +
 packages/ui/src/providers/ListQuery/index.tsx        | 5 ++++-
 test/sort/e2e.spec.ts                                | 4 ----
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/elements/RelationshipTable/index.tsx b/packages/ui/src/elements/RelationshipTable/index.tsx
index 3247dd3c9..79f998188 100644
--- a/packages/ui/src/elements/RelationshipTable/index.tsx
+++ b/packages/ui/src/elements/RelationshipTable/index.tsx
@@ -335,6 +335,7 @@ export const RelationshipTable: React.FC<RelationshipTableComponentProps> = (pro
                 defaultLimit={
                   field.defaultLimit ?? collectionConfig?.admin?.pagination?.defaultLimit
                 }
+                defaultSort={field.defaultSort ?? collectionConfig?.defaultSort}
                 modifySearchParams={false}
                 onQueryChange={setQuery}
                 orderableFieldName={
diff --git a/packages/ui/src/providers/ListQuery/index.tsx b/packages/ui/src/providers/ListQuery/index.tsx
index 62a55dac8..53eee2fc7 100644
--- a/packages/ui/src/providers/ListQuery/index.tsx
+++ b/packages/ui/src/providers/ListQuery/index.tsx
@@ -48,7 +48,10 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
     if (modifySearchParams) {
       return searchParams
     } else {
-      return {}
+      return {
+        limit: String(defaultLimit),
+        sort: defaultSort,
+      }
     }
   })
 
diff --git a/test/sort/e2e.spec.ts b/test/sort/e2e.spec.ts
index fdc53d19d..f8a042137 100644
--- a/test/sort/e2e.spec.ts
+++ b/test/sort/e2e.spec.ts
@@ -82,19 +82,15 @@ describe('Sort functionality', () => {
     await page.getByText('Join A').click()
     await expect(page.locator('.sort-header button')).toHaveCount(2)
 
-    await page.locator('.sort-header button').nth(0).click()
     await assertRows(0, 'A', 'B', 'C', 'D')
     await moveRow(2, 3, 'success', 0) // move to middle
     await assertRows(0, 'A', 'C', 'B', 'D')
 
-    await page.locator('.sort-header button').nth(1).click()
     await assertRows(1, 'A', 'B', 'C', 'D')
     await moveRow(1, 4, 'success', 1) // move to end
     await assertRows(1, 'B', 'C', 'D', 'A')
 
     await page.reload()
-    await page.locator('.sort-header button').nth(0).click()
-    await page.locator('.sort-header button').nth(1).click()
     await assertRows(0, 'A', 'C', 'B', 'D')
     await assertRows(1, 'B', 'C', 'D', 'A')
   })