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

fixes #4365

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -10,9 +10,7 @@ import { MouseEvent, useRef } from 'react';
 import { Keys } from 'react-hotkeys-hook';
 import { Key } from 'ts-key-enum';
 
-import { SINGLE_ENTITY_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleEntitySelectBaseList';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -69,9 +67,6 @@ export const Dropdown = ({
   const { isDropdownOpen, toggleDropdown, closeDropdown, dropdownWidth } =
     useDropdown(dropdownId);
 
-  const { handleResetSelectedPosition } = useSelectableList(
-    SINGLE_ENTITY_SELECT_BASE_LIST,
-  );
   const offsetMiddlewares = [];
 
   if (isDefined(dropdownOffset.x)) {
@@ -108,7 +103,6 @@ export const Dropdown = ({
 
       if (isDropdownOpen) {
         closeDropdown();
-        handleResetSelectedPosition();
       }
     },
   });
@@ -122,10 +116,9 @@ export const Dropdown = ({
     [Key.Escape],
     () => {
       closeDropdown();
-      handleResetSelectedPosition();
     },
     dropdownHotkeyScope.scope,
-    [closeDropdown, handleResetSelectedPosition],
+    [closeDropdown],
   );
 
   return (

packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableItem.tsx

@@ -2,6 +2,12 @@ import { ReactNode, useEffect, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  height: 100%;
+  width: 100%;
+`;
 
 export type SelectableItemProps = {
   itemId: string;
@@ -27,8 +33,8 @@ export const SelectableItem = ({
   }, [isSelectedItemId]);
 
   return (
-    <div className={className} ref={scrollRef}>
+    <StyledContainer className={className} ref={scrollRef}>
       {children}
-    </div>
+    </StyledContainer>
   );
 };

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

@@ -1,8 +1,4 @@
-import {
-  useRecoilCallback,
-  useResetRecoilState,
-  useSetRecoilState,
-} from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
 import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
@@ -24,16 +20,11 @@ export const useSelectableList = (selectableListId?: string) => {
     selectableListOnEnterState,
   );
 
-  const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
-
-  const resetSelectedItem = () => {
-    resetSelectedItemIdState();
-  };
-
-  const handleResetSelectedPosition = useRecoilCallback(
+  const resetSelectedItem = useRecoilCallback(
     ({ snapshot, set }) =>
       () => {
         const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
+
         if (isDefined(selectedItemId)) {
           set(selectedItemIdState, null);
           set(isSelectedItemIdSelector(selectedItemId), false);
@@ -44,11 +35,9 @@ export const useSelectableList = (selectableListId?: string) => {
 
   return {
     selectableListId: scopeId,
-
     setSelectableItemIds,
     isSelectedItemIdSelector,
     setSelectableListOnEnter,
     resetSelectedItem,
-    handleResetSelectedPosition,
   };
 };

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -8,12 +8,12 @@ export type MenuItemBaseProps = {
   accent?: MenuItemAccent;
   isKeySelected?: boolean;
   isHoverBackgroundDisabled?: boolean;
+  hovered?: boolean;
 };
 
 export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
   --horizontal-padding: ${({ theme }) => theme.spacing(1)};
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
-
   align-items: center;
 
   border-radius: ${({ theme }) => theme.border.radius.sm};