From f620d38708345926deefc70fbd36c73673dcd299 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <ar5438376@gmail.com>
Date: Fri, 17 Apr 2026 18:31:50 +0530
Subject: [PATCH] Refactor input focus management in selectable lists

- Removed the `SELECTABLE_LIST_BLURRED_ATTRIBUTE` constant and replaced its usage with the new `isSelectableListGridFocusedState` atom for managing input focus state.
- Updated `useInputFocusWithoutScrollOnMount` to utilize the new state for determining focus behavior.
- Modified `useSelectableListHotKeys` to set the focus state atom when blurring and refocusing inputs.

These changes streamline the focus management logic and improve the overall user experience in selectable lists.
---
 .../ui/input/hooks/useInputFocusWithoutScrollOnMount.ts  | 6 ++++--
 .../constants/SelectableListBlurredAttribute.ts          | 1 -
 .../hooks/internal/useSelectableListHotKeys.ts           | 9 +++------
 .../states/isSelectableListGridFocusedState.ts           | 6 ++++++
 4 files changed, 13 insertions(+), 9 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/ui/layout/selectable-list/constants/SelectableListBlurredAttribute.ts
 create mode 100644 packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectableListGridFocusedState.ts

diff --git a/packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts b/packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts
index 6b7cfefa581..30b834fb78a 100644
--- a/packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts
+++ b/packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts
@@ -1,15 +1,17 @@
+import { useStore } from 'jotai';
 import { useEffect, useRef } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
-import { SELECTABLE_LIST_BLURRED_ATTRIBUTE } from '@/ui/layout/selectable-list/constants/SelectableListBlurredAttribute';
+import { isSelectableListGridFocusedState } from '@/ui/layout/selectable-list/states/isSelectableListGridFocusedState';
 
 export const useInputFocusWithoutScrollOnMount = () => {
   const inputRef = useRef<HTMLInputElement>(null);
+  const store = useStore();
 
   useEffect(() => {
     if (
       isDefined(inputRef.current) &&
-      inputRef.current.dataset[SELECTABLE_LIST_BLURRED_ATTRIBUTE] !== 'true'
+      !store.get(isSelectableListGridFocusedState.atom)
     ) {
       inputRef.current.focus({ preventScroll: true });
     }
diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/constants/SelectableListBlurredAttribute.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/constants/SelectableListBlurredAttribute.ts
deleted file mode 100644
index d422c4f6447..00000000000
--- a/packages/twenty-front/src/modules/ui/layout/selectable-list/constants/SelectableListBlurredAttribute.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const SELECTABLE_LIST_BLURRED_ATTRIBUTE = 'selectableListBlurred';
diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.ts
index 1d640043656..8f02acac7f6 100644
--- a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.ts
+++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.ts
@@ -3,7 +3,7 @@ import { useStore } from 'jotai';
 import { useCallback, useRef } from 'react';
 import { Key } from 'ts-key-enum';
 
-import { SELECTABLE_LIST_BLURRED_ATTRIBUTE } from '@/ui/layout/selectable-list/constants/SelectableListBlurredAttribute';
+import { isSelectableListGridFocusedState } from '@/ui/layout/selectable-list/states/isSelectableListGridFocusedState';
 import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState';
 import { selectableItemIdsComponentState } from '@/ui/layout/selectable-list/states/selectableItemIdsComponentState';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@@ -24,8 +24,7 @@ export const useSelectableListHotKeys = (
   const blurActiveInputIfNeeded = () => {
     if (document.activeElement instanceof HTMLInputElement) {
       lastBlurredInputRef.current = document.activeElement;
-      document.activeElement.dataset[SELECTABLE_LIST_BLURRED_ATTRIBUTE] =
-        'true';
+      store.set(isSelectableListGridFocusedState.atom, true);
       document.activeElement.blur();
     }
   };
@@ -34,9 +33,7 @@ export const useSelectableListHotKeys = (
     if (!lastBlurredInputRef.current) {
       return;
     }
-    delete lastBlurredInputRef.current.dataset[
-      SELECTABLE_LIST_BLURRED_ATTRIBUTE
-    ];
+    store.set(isSelectableListGridFocusedState.atom, false);
     lastBlurredInputRef.current.focus();
     lastBlurredInputRef.current = null;
   };
diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectableListGridFocusedState.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectableListGridFocusedState.ts
new file mode 100644
index 00000000000..67816432281
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectableListGridFocusedState.ts
@@ -0,0 +1,6 @@
+import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+
+export const isSelectableListGridFocusedState = createAtomState<boolean>({
+  key: 'isSelectableListGridFocusedState',
+  defaultValue: false,
+});