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

Fixed single record select hotkeys (#9433)

Browse Source 
There is a problem of hotkey scope not being passed to the relation
picker used for single record select fields.

Fixed it where we open a single record select.
This commit is contained in:
Lucas Bordeau
2025-01-07 17:06:06 +01:00
committed by GitHub
parent 0c75b244ba
commit 6129052850
10 changed files with 77 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
View File

@ -1,17 +1,18 @@
import { useRecoilState } from 'recoil';
import { useRecoilCallback, useRecoilState } from 'recoil';
import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useCallback } from 'react';
import { isDefined } from '~/utils/isDefined';
export const useDropdown = (dropdownId?: string) => {
const {
scopeId,
dropdownHotkeyScopeState,
dropdownWidthState,
isDropdownOpenState,
dropdownPlacementState,
@ -30,8 +31,6 @@ export const useDropdown = (dropdownId?: string) => {
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const [dropdownHotkeyScope] = useRecoilState(dropdownHotkeyScopeState);
const [dropdownWidth, setDropdownWidth] = useRecoilState(dropdownWidthState);
const [dropdownPlacement, setDropdownPlacement] = useRecoilState(
@ -54,18 +53,37 @@ export const useDropdown = (dropdownId?: string) => {
goBackToPreviousDropdownFocusId,
]);
const openDropdown = () => {
if (!isDropdownOpen) {
setIsDropdownOpen(true);
setActiveDropdownFocusIdAndMemorizePrevious(dropdownId ?? scopeId);
if (isDefined(dropdownHotkeyScope)) {
setHotkeyScopeAndMemorizePreviousScope(
dropdownHotkeyScope.scope,
dropdownHotkeyScope.customScopes,
);
}
}
};
const openDropdown = useRecoilCallback(
({ snapshot }) =>
() => {
if (!isDropdownOpen) {
setIsDropdownOpen(true);
setActiveDropdownFocusIdAndMemorizePrevious(dropdownId ?? scopeId);
const dropdownHotkeyScope = getSnapshotValue(
snapshot,
dropdownHotkeyComponentState({
scopeId: dropdownId ?? scopeId,
}),
);
if (isDefined(dropdownHotkeyScope)) {
setHotkeyScopeAndMemorizePreviousScope(
dropdownHotkeyScope.scope,
dropdownHotkeyScope.customScopes,
);
}
}
},
[
dropdownId,
isDropdownOpen,
scopeId,
setHotkeyScopeAndMemorizePreviousScope,
setActiveDropdownFocusIdAndMemorizePrevious,
setIsDropdownOpen,
],
);
const toggleDropdown = () => {
if (isDropdownOpen) {