mirror/twenty
1
0
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2026-05-19 05:53:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor input focus management in selectable lists

Browse Source 
- 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.
This commit is contained in:
Abdul Rahman
2026-04-17 18:31:50 +05:30
parent f70e5530f4
commit f620d38708
4 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts
View File

@@ -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 });
}

1
packages/twenty-front/src/modules/ui/layout/selectable-list/constants/SelectableListBlurredAttribute.ts
View File

@@ -1 +0,0 @@
export const SELECTABLE_LIST_BLURRED_ATTRIBUTE = 'selectableListBlurred';

9
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.ts
View File

@@ -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;
};

6
packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectableListGridFocusedState.ts Normal file
View File

@@ -0,0 +1,6 @@
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
export const isSelectableListGridFocusedState = createAtomState<boolean>({
key: 'isSelectableListGridFocusedState',
defaultValue: false,
});