From 9e22c74b2d0f6b6839f3f6e7c9a9aa3de52ebb3f Mon Sep 17 00:00:00 2001
From: Match <132382032+gayanMatch@users.noreply.github.com>
Date: Sat, 10 Jan 2026 06:04:26 -0800
Subject: [PATCH] Fix sort direction toggle when clicking on existing sort
 (#17046)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #17032

  Summary

When a sort is already applied to a column, clicking "Sort" from the
column header dropdown now toggles the sort direction (ASC → DESC or
DESC → ASC) instead of doing nothing.

  Problem

Previously, clicking "Sort" on a column that already had a sort applied
would always try to create a new sort with ASC direction. Since the
upsertRecordSort function updates an existing sort with the same field,
this effectively did nothing when the sort was already ASC—which felt
unintuitive.

  Solution

  Modified useHandleToggleColumnSort to:
  - Check if a sort already exists for the clicked field
  - If it exists, toggle the direction
- If it doesn't exist, create a new sort with ASC direction (existing
behavior)

---

Contribution by Gittensor, see my contribution statistics at
https://gittensor.io/miners/details?githubId=132382032
---
 .../hooks/useHandleToggleColumnSort.ts        | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts
index 35c34e304d..399f118510 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts
@@ -1,9 +1,11 @@
-import { useCallback } from 'react';
-
 import { useColumnDefinitionsFromObjectMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromObjectMetadata';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { useUpsertRecordSort } from '@/object-record/record-sort/hooks/useUpsertRecordSort';
+import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
 import { type RecordSort } from '@/object-record/record-sort/types/RecordSort';
+import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
+import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { v4 } from 'uuid';
 import { ViewSortDirection } from '~/generated/graphql';
@@ -24,24 +26,42 @@ export const useHandleToggleColumnSort = ({
 
   const { upsertRecordSort } = useUpsertRecordSort();
 
-  const handleToggleColumnSort = useCallback(
-    async (fieldMetadataId: string) => {
-      const correspondingColumnDefinition = columnDefinitions.find(
-        (columnDefinition) =>
-          columnDefinition.fieldMetadataId === fieldMetadataId,
-      );
+  const currentRecordSortsCallbackState = useRecoilComponentCallbackState(
+    currentRecordSortsComponentState,
+  );
 
-      if (!isDefined(correspondingColumnDefinition)) return;
+  const handleToggleColumnSort = useRecoilCallback(
+    ({ snapshot }) =>
+      (fieldMetadataId: string) => {
+        const correspondingColumnDefinition = columnDefinitions.find(
+          (columnDefinition) =>
+            columnDefinition.fieldMetadataId === fieldMetadataId,
+        );
 
-      const newSort: RecordSort = {
-        id: v4(),
-        fieldMetadataId,
-        direction: ViewSortDirection.ASC,
-      };
+        if (!isDefined(correspondingColumnDefinition)) return;
 
-      upsertRecordSort(newSort);
-    },
-    [columnDefinitions, upsertRecordSort],
+        const currentRecordSorts = getSnapshotValue(
+          snapshot,
+          currentRecordSortsCallbackState,
+        );
+
+        const existingSort = currentRecordSorts.find(
+          (sort) => sort.fieldMetadataId === fieldMetadataId,
+        );
+
+        const newSort: RecordSort = {
+          id: existingSort?.id ?? v4(),
+          fieldMetadataId,
+          direction: existingSort
+            ? existingSort.direction === ViewSortDirection.ASC
+              ? ViewSortDirection.DESC
+              : ViewSortDirection.ASC
+            : ViewSortDirection.ASC,
+        };
+
+        upsertRecordSort(newSort);
+      },
+    [columnDefinitions, currentRecordSortsCallbackState, upsertRecordSort],
   );
 
   return handleToggleColumnSort;