admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: navigate with arrow keys in select/multi-select (#5983)

Browse Source 
closes: #4977



https://github.com/twentyhq/twenty/assets/13139771/8121814c-9a8a-4a8d-9290-1aebe145220f

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Aditya Pimpalkar
2024-08-02 19:12:46 +01:00
committed by GitHub
parent c5d95dc4c8
commit 1f5c25ac0a
17 changed files with 518 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts
View File

@ -1,6 +1,12 @@
import { useResetRecoilState, useSetRecoilState } from 'recoil';
import {
useRecoilCallback,
useResetRecoilState,
useSetRecoilState,
} from 'recoil';
import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { isDefined } from '~/utils/isDefined';
export const useSelectableList = (selectableListId?: string) => {
const {
@ -24,6 +30,18 @@ export const useSelectableList = (selectableListId?: string) => {
resetSelectedItemIdState();
};
const handleResetSelectedPosition = useRecoilCallback(
({ snapshot, set }) =>
() => {
const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
if (isDefined(selectedItemId)) {
set(selectedItemIdState, null);
set(isSelectedItemIdSelector(selectedItemId), false);
}
},
[selectedItemIdState, isSelectedItemIdSelector],
);
return {
selectableListId: scopeId,
@ -31,5 +49,6 @@ export const useSelectableList = (selectableListId?: string) => {
isSelectedItemIdSelector,
setSelectableListOnEnter,
resetSelectedItem,
handleResetSelectedPosition,
};
};