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

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>

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

@@ -17,6 +17,7 @@ type MenuItemMultiSelectProps = {
   color?: ThemeColor;
   LeftIcon?: IconComponent;
   selected: boolean;
+  isKeySelected?: boolean;
   text: string;
   className: string;
   onSelectChange?: (selected: boolean) => void;
@@ -27,6 +28,7 @@ export const MenuItemMultiSelect = ({
   LeftIcon,
   text,
   selected,
+  isKeySelected,
   className,
   onSelectChange,
 }: MenuItemMultiSelectProps) => {
@@ -35,7 +37,11 @@ export const MenuItemMultiSelect = ({
   };
 
   return (
-    <StyledMenuItemBase className={className} onClick={handleOnClick}>
+    <StyledMenuItemBase
+      isKeySelected={isKeySelected}
+      className={className}
+      onClick={handleOnClick}
+    >
       <StyledLeftContentWithCheckboxContainer>
         <Checkbox checked={selected} />
         {color ? (

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

@@ -14,6 +14,7 @@ import {
 type MenuItemMultiSelectTagProps = {
   selected: boolean;
   className?: string;
+  isKeySelected?: boolean;
   onClick?: () => void;
   color: ThemeColor;
   text: string;
@@ -24,10 +25,15 @@ export const MenuItemMultiSelectTag = ({
   selected,
   className,
   onClick,
+  isKeySelected,
   text,
 }: MenuItemMultiSelectTagProps) => {
   return (
-    <StyledMenuItemBase onClick={onClick} className={className}>
+    <StyledMenuItemBase
+      isKeySelected={isKeySelected}
+      onClick={onClick}
+      className={className}
+    >
       <Checkbox
         size={CheckboxSize.Small}
         shape={CheckboxShape.Squared}

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

@@ -7,6 +7,7 @@ import { StyledMenuItemSelect } from './MenuItemSelect';
 
 type MenuItemSelectTagProps = {
   selected: boolean;
+  isKeySelected?: boolean;
   className?: string;
   onClick?: () => void;
   color: ThemeColor | 'transparent';
@@ -17,6 +18,7 @@ type MenuItemSelectTagProps = {
 export const MenuItemSelectTag = ({
   color,
   selected,
+  isKeySelected,
   className,
   onClick,
   text,
@@ -29,6 +31,7 @@ export const MenuItemSelectTag = ({
       onClick={onClick}
       className={className}
       selected={selected}
+      isKeySelected={isKeySelected}
     >
       <StyledMenuItemLeftContent>
         <Tag variant={variant} color={color} text={text} />

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

@@ -32,6 +32,9 @@ export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
 
   padding: var(--vertical-padding) var(--horizontal-padding);
 
+  ${({ theme, isKeySelected }) =>
+    isKeySelected ? `background: ${theme.background.transparent.light};` : ''}
+
   ${({ isHoverBackgroundDisabled }) =>
     isHoverBackgroundDisabled ?? HOVER_BACKGROUND};