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

fixes #4365

---------

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

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx

@@ -1,15 +1,18 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { useIcons } from 'twenty-ui';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
-import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
-import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
+import { ObjectFilterDropdownFilterSelectMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem';
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
+import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter';
+import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
+import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+import { isDefined } from 'twenty-ui';
 
 export const StyledInput = styled.input`
   background: transparent;
@@ -39,20 +42,40 @@ export const StyledInput = styled.input`
 
 export const ObjectFilterDropdownFilterSelect = () => {
   const [searchText, setSearchText] = useState('');
-  const {
+
-    setFilterDefinitionUsedInDropdown,
+  const { availableFilterDefinitionsState } = useFilterDropdown();
-    setSelectedOperandInDropdown,
-    setObjectFilterDropdownSearchInput,
-    availableFilterDefinitionsState,
-  } = useFilterDropdown();
 
   const availableFilterDefinitions = useRecoilValue(
     availableFilterDefinitionsState,
   );
 
-  const { getIcon } = useIcons();
+  const sortedAvailableFilterDefinitions = [...availableFilterDefinitions]
+    .sort((a, b) => a.label.localeCompare(b.label))
+    .filter((item) =>
+      item.label.toLocaleLowerCase().includes(searchText.toLocaleLowerCase()),
+    );
 
-  const setHotkeyScope = useSetHotkeyScope();
+  const selectableListItemIds = sortedAvailableFilterDefinitions.map(
+    (item) => item.fieldMetadataId,
+  );
+
+  const { selectFilter } = useSelectFilter();
+
+  const { resetSelectedItem } = useSelectableList(OBJECT_FILTER_DROPDOWN_ID);
+
+  const handleEnter = (itemId: string) => {
+    const selectedFilterDefinition = sortedAvailableFilterDefinitions.find(
+      (item) => item.fieldMetadataId === itemId,
+    );
+
+    if (!isDefined(selectedFilterDefinition)) {
+      return;
+    }
+
+    resetSelectedItem();
+
+    selectFilter({ filterDefinition: selectedFilterDefinition });
+  };
 
   return (
     <>
@@ -64,39 +87,27 @@ export const ObjectFilterDropdownFilterSelect = () => {
           setSearchText(event.target.value)
         }
       />
-      <DropdownMenuItemsContainer>
+      <SelectableList
-        {[...availableFilterDefinitions]
+        hotkeyScope={FiltersHotkeyScope.ObjectFilterDropdownButton}
-          .sort((a, b) => a.label.localeCompare(b.label))
+        selectableItemIdArray={selectableListItemIds}
-          .filter((item) =>
+        selectableListId={OBJECT_FILTER_DROPDOWN_ID}
-            item.label
+        onEnter={handleEnter}
-              .toLocaleLowerCase()
+      >
-              .includes(searchText.toLocaleLowerCase()),
+        <DropdownMenuItemsContainer>
-          )
+          {sortedAvailableFilterDefinitions.map(
-          .map((availableFilterDefinition, index) => (
+            (availableFilterDefinition, index) => (
-            <MenuItem
+              <SelectableItem
-              key={`select-filter-${index}`}
+                itemId={availableFilterDefinition.fieldMetadataId}
-              testId={`select-filter-${index}`}
+              >
-              onClick={() => {
+                <ObjectFilterDropdownFilterSelectMenuItem
-                setFilterDefinitionUsedInDropdown(availableFilterDefinition);
+                  key={`select-filter-${index}`}
-
+                  filterDefinition={availableFilterDefinition}
-                if (
+                />
-                  availableFilterDefinition.type === 'RELATION' ||
+              </SelectableItem>
-                  availableFilterDefinition.type === 'SELECT'
+            ),
-                ) {
+          )}
-                  setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
+        </DropdownMenuItemsContainer>
-                }
+      </SelectableList>
-
-                setSelectedOperandInDropdown(
-                  getOperandsForFilterType(availableFilterDefinition.type)?.[0],
-                );
-
-                setObjectFilterDropdownSearchInput('');
-              }}
-              LeftIcon={getIcon(availableFilterDefinition.iconName)}
-              text={availableFilterDefinition.label}
-            />
-          ))}
-      </DropdownMenuItemsContainer>
     </>
   );
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx

@@ -0,0 +1,43 @@
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
+import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter';
+import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
+import { useRecoilValue } from 'recoil';
+import { useIcons } from 'twenty-ui';
+
+export type ObjectFilterDropdownFilterSelectMenuItemProps = {
+  filterDefinition: FilterDefinition;
+};
+
+export const ObjectFilterDropdownFilterSelectMenuItem = ({
+  filterDefinition,
+}: ObjectFilterDropdownFilterSelectMenuItemProps) => {
+  const { selectFilter } = useSelectFilter();
+
+  const { isSelectedItemIdSelector, resetSelectedItem } = useSelectableList(
+    OBJECT_FILTER_DROPDOWN_ID,
+  );
+
+  const isSelectedItem = useRecoilValue(
+    isSelectedItemIdSelector(filterDefinition.fieldMetadataId),
+  );
+
+  const { getIcon } = useIcons();
+
+  const handleClick = () => {
+    resetSelectedItem();
+
+    selectFilter({ filterDefinition });
+  };
+
+  return (
+    <MenuItemSelect
+      selected={false}
+      hovered={isSelectedItem}
+      onClick={handleClick}
+      LeftIcon={getIcon(filterDefinition.iconName)}
+      text={filterDefinition.label}
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx

@@ -41,7 +41,7 @@ export const ObjectFilterDropdownOptionSelect = () => {
     selectableListScopeId: MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
   });
 
-  const { handleResetSelectedPosition } = useSelectableList(
+  const { resetSelectedItem } = useSelectableList(
     MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
   );
 
@@ -90,10 +90,10 @@ export const ObjectFilterDropdownOptionSelect = () => {
     [Key.Escape],
     () => {
       closeDropdown();
-      handleResetSelectedPosition();
+      resetSelectedItem();
     },
     RelationPickerHotkeyScope.RelationPicker,
-    [closeDropdown, handleResetSelectedPosition],
+    [closeDropdown, resetSelectedItem],
   );
 
   const handleMultipleOptionSelectChange = (
@@ -137,7 +137,7 @@ export const ObjectFilterDropdownOptionSelect = () => {
         value: newFilterValue,
       });
     }
-    handleResetSelectedPosition();
+    resetSelectedItem();
   };
 
   const optionsInDropdown = selectableOptions?.filter((option) =>

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilter.ts

@@ -0,0 +1,40 @@
+import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
+import { getOperandsForFilterType } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType';
+import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+
+type SelectFilterParams = {
+  filterDefinition: FilterDefinition;
+};
+
+export const useSelectFilter = () => {
+  const {
+    setFilterDefinitionUsedInDropdown,
+    setSelectedOperandInDropdown,
+    setObjectFilterDropdownSearchInput,
+  } = useFilterDropdown();
+
+  const setHotkeyScope = useSetHotkeyScope();
+
+  const selectFilter = ({ filterDefinition }: SelectFilterParams) => {
+    setFilterDefinitionUsedInDropdown(filterDefinition);
+
+    if (
+      filterDefinition.type === 'RELATION' ||
+      filterDefinition.type === 'SELECT'
+    ) {
+      setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
+    }
+
+    setSelectedOperandInDropdown(
+      getOperandsForFilterType(filterDefinition.type)?.[0],
+    );
+
+    setObjectFilterDropdownSearchInput('');
+  };
+
+  return {
+    selectFilter,
+  };
+};

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx

@@ -33,7 +33,7 @@ export const MultiSelectFieldInput = ({
   const { selectedItemIdState } = useSelectableListStates({
     selectableListScopeId: MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
   });
-  const { handleResetSelectedPosition } = useSelectableList(
+  const { resetSelectedItem } = useSelectableList(
     MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
   );
   const { persistField, fieldDefinition, fieldValues, hotkeyScope } =
@@ -65,10 +65,10 @@ export const MultiSelectFieldInput = ({
     Key.Escape,
     () => {
       onCancel?.();
-      handleResetSelectedPosition();
+      resetSelectedItem();
     },
     hotkeyScope,
-    [onCancel, handleResetSelectedPosition],
+    [onCancel, resetSelectedItem],
   );
 
   useListenClickOutside({
@@ -83,7 +83,7 @@ export const MultiSelectFieldInput = ({
       if (weAreNotInAnHTMLInput && isDefined(onCancel)) {
         onCancel();
       }
-      handleResetSelectedPosition();
+      resetSelectedItem();
     },
   });
 

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx

@@ -27,7 +27,7 @@ export const SelectFieldInput = ({
 
   const [filteredOptions, setFilteredOptions] = useState<SelectOption[]>([]);
 
-  const { handleResetSelectedPosition } = useSelectableList(
+  const { resetSelectedItem } = useSelectableList(
     SINGLE_ENTITY_SELECT_BASE_LIST,
   );
   const clearField = useClearField();
@@ -44,17 +44,17 @@ export const SelectFieldInput = ({
   const handleSubmit = (option: SelectOption) => {
     onSubmit?.(() => persistField(option?.value));
 
-    handleResetSelectedPosition();
+    resetSelectedItem();
   };
 
   useScopedHotkeys(
     Key.Escape,
     () => {
       onCancel?.();
-      handleResetSelectedPosition();
+      resetSelectedItem();
     },
     hotkeyScope,
-    [onCancel, handleResetSelectedPosition],
+    [onCancel, resetSelectedItem],
   );
 
   const optionIds = [
@@ -74,7 +74,7 @@ export const SelectFieldInput = ({
           );
           if (isDefined(option)) {
             onSubmit?.(() => persistField(option.value));
-            handleResetSelectedPosition();
+            resetSelectedItem();
           }
         }}
       >

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

@@ -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();
                       }}
                     />
                   );

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

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

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

@@ -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 } =
+  const { isSelectedItemIdSelector, resetSelectedItem } = useSelectableList(
-    useSelectableList(SINGLE_ENTITY_SELECT_BASE_LIST);
+    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>

packages/twenty-front/src/modules/object-record/select/components/MultipleRecordSelectDropdown.tsx

@@ -40,7 +40,7 @@ export const MultipleRecordSelectDropdown = ({
     selectableListScopeId: selectableListId,
   });
 
-  const { handleResetSelectedPosition } = useSelectableList(selectableListId);
+  const { resetSelectedItem } = useSelectableList(selectableListId);
 
   const selectedItemId = useRecoilValue(selectedItemIdState);
 
@@ -75,10 +75,10 @@ export const MultipleRecordSelectDropdown = ({
     [Key.Escape],
     () => {
       closeDropdown();
-      handleResetSelectedPosition();
+      resetSelectedItem();
     },
     hotkeyScope,
-    [closeDropdown, handleResetSelectedPosition],
+    [closeDropdown, resetSelectedItem],
   );
 
   const showNoResult =
@@ -105,7 +105,7 @@ export const MultipleRecordSelectDropdown = ({
           recordsInDropdown[record],
           !recordIsSelectedInDropwdown,
         );
-        handleResetSelectedPosition();
+        resetSelectedItem();
       }}
     >
       <DropdownMenuItemsContainer hasMaxHeight>
@@ -116,7 +116,7 @@ export const MultipleRecordSelectDropdown = ({
               selected={record.isSelected}
               isKeySelected={record.id === selectedItemId}
               onSelectChange={(newCheckedValue) => {
-                handleResetSelectedPosition();
+                resetSelectedItem();
                 handleRecordSelectChange(record, newCheckedValue);
               }}
               avatar={

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 {
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
-  useRecoilCallback,
-  useResetRecoilState,
-  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 = useRecoilCallback(
-
-  const resetSelectedItem = () => {
-    resetSelectedItemIdState();
-  };
-
-  const handleResetSelectedPosition = 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};