Fixed single record select hotkeys (#9433)

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.

packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx

@@ -51,13 +51,13 @@ export const WithOpenMonthSelect: Story = {
       'October',
       'November',
       'December',
-    ].forEach((monthLabel) =>
-      expect(canvas.getByText(monthLabel)).toBeInTheDocument(),
+    ].forEach(async (monthLabel) =>
+      expect(await canvas.findByText(monthLabel)).toBeInTheDocument(),
     );
 
-    await userEvent.click(canvas.getByText('February'));
+    await userEvent.click(await canvas.findByText('February'));
 
-    expect(canvas.getByText('February')).toBeInTheDocument();
+    expect(await canvas.findByText('February')).toBeInTheDocument();
   },
 };
 
@@ -69,12 +69,12 @@ export const WithOpenYearSelect: Story = {
 
     await userEvent.click(yearSelect);
 
-    ['2024', '2025', '2026'].forEach((yearLabel) =>
-      expect(canvas.getByText(yearLabel)).toBeInTheDocument(),
+    ['2024', '2025', '2026'].forEach(async (yearLabel) =>
+      expect(await canvas.findByText(yearLabel)).toBeInTheDocument(),
     );
 
-    await userEvent.click(canvas.getByText('2024'));
+    await userEvent.click(await canvas.findByText('2024'));
 
-    expect(canvas.getByText('2024')).toBeInTheDocument();
+    expect(await canvas.findByText('2024')).toBeInTheDocument();
   },
 };

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -17,11 +17,14 @@ import { useDropdown } from '../hooks/useDropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownUnmountEffect } from '@/ui/layout/dropdown/components/DropdownUnmountEffect';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponeInstanceContext';
+import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
 import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import styled from '@emotion/styled';
 import { flushSync } from 'react-dom';
+import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-ui';
+import { sleep } from '~/utils/sleep';
 import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';
 
 const StyledDropdownFallbackAnchor = styled.div`
@@ -104,13 +107,25 @@ export const Dropdown = ({
     strategy: dropdownStrategy,
   });
 
-  const handleClickableComponentClick = (event: MouseEvent) => {
-    event.stopPropagation();
-    event.preventDefault();
+  const handleClickableComponentClick = useRecoilCallback(
+    ({ set }) =>
+      async (event: MouseEvent) => {
+        event.stopPropagation();
+        event.preventDefault();
 
-    toggleDropdown();
-    onClickOutside?.();
-  };
+        // TODO: refactor this when we have finished dropdown refactor with state and V1 + V2
+        set(
+          dropdownHotkeyComponentState({ scopeId: dropdownId }),
+          dropdownHotkeyScope,
+        );
+
+        await sleep(100);
+
+        toggleDropdown();
+        onClickOutside?.();
+      },
+    [dropdownId, dropdownHotkeyScope, onClickOutside, toggleDropdown],
+  );
 
   return (
     <DropdownComponentInstanceContext.Provider

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

@@ -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) {