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

Adds KeyBoard Navigation to ObjectFilterDropDownFilterSelect ( #4365 ) (#6613)

Browse Source 
fixes #4365

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Faisal-imtiyaz123
2024-09-06 23:43:51 +05:30
committed by GitHub
parent c0d0f8d78d
commit 99f8f8fedb
14 changed files with 183 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
View File

@ -48,7 +48,7 @@ export const MultiRecordSelect = ({
const { objectRecordsIdsMultiSelectState, recordMultiSelectIsLoadingState } =
useObjectRecordMultiSelectScopedStates(relationPickerScopedId);
const { handleResetSelectedPosition } = useSelectableList(
const { resetSelectedItem } = useSelectableList(
MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
);
const recordMultiSelectIsLoading = useRecoilValue(
@ -79,10 +79,10 @@ export const MultiRecordSelect = ({
() => {
onSubmit?.();
goBackToPreviousHotkeyScope();
handleResetSelectedPosition();
resetSelectedItem();
},
relationPickerScopedId,
[onSubmit, goBackToPreviousHotkeyScope, handleResetSelectedPosition],
[onSubmit, goBackToPreviousHotkeyScope, resetSelectedItem],
);
const debouncedOnCreate = useDebouncedCallback(
@ -123,7 +123,7 @@ export const MultiRecordSelect = ({
hotkeyScope={relationPickerScopedId}
onEnter={(selectedId) => {
onChange?.(selectedId);
handleResetSelectedPosition();
resetSelectedItem();
}}
>
{objectRecordsIdsMultiSelect?.map((recordId) => {
@ -133,7 +133,7 @@ export const MultiRecordSelect = ({
objectRecordId={recordId}
onChange={(recordId) => {
onChange?.(recordId);
handleResetSelectedPosition();
resetSelectedItem();
}}
/>
);

1
packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
View File

@ -27,7 +27,6 @@ export const SelectableMenuItemSelect = ({
);
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(entity.id));
return (
<StyledSelectableItem itemId={entity.id} key={entity.id}>
<MenuItemSelectAvatar

13
packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
View File

@ -1,5 +1,5 @@
import { useRef } from 'react';
import { isNonEmptyString } from '@sniptt/guards';
import { useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { IconComponent, IconPlus } from 'twenty-ui';
@ -92,8 +92,9 @@ export const SingleEntitySelectMenuItems = ({
isDefined(entity) && isNonEmptyString(entity.name),
);
const { isSelectedItemIdSelector, handleResetSelectedPosition } =
useSelectableList(SINGLE_ENTITY_SELECT_BASE_LIST);
const { isSelectedItemIdSelector, resetSelectedItem } = useSelectableList(
SINGLE_ENTITY_SELECT_BASE_LIST,
);
const isSelectedAddNewButton = useRecoilValue(
isSelectedItemIdSelector('add-new'),
@ -110,11 +111,11 @@ export const SingleEntitySelectMenuItems = ({
useScopedHotkeys(
[Key.Escape],
() => {
handleResetSelectedPosition();
resetSelectedItem();
onCancel?.();
},
hotkeyScope,
[onCancel, handleResetSelectedPosition],
[onCancel, resetSelectedItem],
);
const selectableItemIds = entitiesInDropdown.map((entity) => entity.id);
@ -134,7 +135,7 @@ export const SingleEntitySelectMenuItems = ({
);
onEntitySelected(entitiesInDropdown[entityIndex]);
}
handleResetSelectedPosition();
resetSelectedItem();
}}
>
<DropdownMenuItemsContainer hasMaxHeight>