fix: Update company picker keyboard navigation (#1628)

* fix: scroll

* fix: use ref

* fix: new changes

* fix: remove ref

* fix: state

* chore: clean up

* Include Empty option

* Include Empty option

* Include Empty option

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+
+const StyledCreateNewButton = styled(MenuItem)<{ hovered: boolean }>`
+  ${({ hovered, theme }) =>
+    hovered &&
+    css`
+      background: ${theme.background.transparent.light};
+    `}
+`;
+
+export const CreateNewButton = StyledCreateNewButton;

front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx

@@ -2,10 +2,7 @@ import { useRef } from 'react';
 
 import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
-import { IconPlus } from '@/ui/icon';
-import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
@@ -59,6 +56,7 @@ export const SingleEntitySelect = <
       onCancel?.();
     },
   });
+
   return (
     <StyledDropdownMenu
       disableBlur={disableBackgroundBlur}
@@ -71,15 +69,12 @@ export const SingleEntitySelect = <
         autoFocus
       />
       <StyledDropdownMenuSeparator />
-      <SingleEntitySelectBase {...props} onCancel={onCancel} />
+      <SingleEntitySelectBase
-      {showCreateButton && (
+        {...props}
-        <>
+        onCancel={onCancel}
-          <StyledDropdownMenuItemsContainer hasMaxHeight>
+        onCreate={onCreate}
-            <MenuItem onClick={onCreate} LeftIcon={IconPlus} text="Add New" />
+        showCreateButton={showCreateButton}
-          </StyledDropdownMenuItemsContainer>
+      />
-          <StyledDropdownMenuSeparator />
-        </>
-      )}
     </StyledDropdownMenu>
   );
 };

front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx

@@ -2,19 +2,24 @@ import { useRef } from 'react';
 import { Key } from 'ts-key-enum';
 
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
+import { IconPlus } from '@/ui/icon';
 import type { IconComponent } from '@/ui/icon/types/IconComponent';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+import { MenuItemSelect } from '@/ui/menu-item/components/MenuItemSelect';
 import { MenuItemSelectAvatar } from '@/ui/menu-item/components/MenuItemSelectAvatar';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { Avatar } from '@/users/components/Avatar';
 import { assertNotNull } from '~/utils/assert';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
 
+import { CreateButtonId, EmptyButtonId } from '../constants';
 import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
 
 import { DropdownMenuSkeletonItem } from './skeletons/DropdownMenuSkeletonItem';
+import { CreateNewButton } from './CreateNewButton';
 
 export type SingleEntitySelectBaseProps<
   CustomEntityForSelect extends EntityForSelect,
@@ -26,6 +31,8 @@ export type SingleEntitySelectBaseProps<
   onCancel?: () => void;
   onEntitySelected: (entity?: CustomEntityForSelect) => void;
   selectedEntity?: CustomEntityForSelect;
+  onCreate?: () => void;
+  showCreateButton?: boolean;
 };
 
 export const SingleEntitySelectBase = <
@@ -38,6 +45,8 @@ export const SingleEntitySelectBase = <
   onCancel,
   onEntitySelected,
   selectedEntity,
+  onCreate,
+  showCreateButton,
 }: SingleEntitySelectBaseProps<CustomEntityForSelect>) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const entitiesInDropdown = [selectedEntity, ...entitiesToSelect].filter(
@@ -45,19 +54,31 @@ export const SingleEntitySelectBase = <
       assertNotNull(entity) && isNonEmptyString(entity.name.trim()),
   );
 
-  const { hoveredIndex, resetScroll } = useEntitySelectScroll({
+  const { preselectedOptionId, resetScroll } = useEntitySelectScroll({
-    entities: entitiesInDropdown,
+    selectableOptionIds: [
+      EmptyButtonId,
+      ...entitiesInDropdown.map((item) => item.id),
+      ...(showCreateButton ? [CreateButtonId] : []),
+    ],
     containerRef,
   });
 
   useScopedHotkeys(
     Key.Enter,
     () => {
-      onEntitySelected(entitiesInDropdown[hoveredIndex]);
+      if (showCreateButton && preselectedOptionId === CreateButtonId) {
+        onCreate?.();
+      } else {
+        const entity = entitiesInDropdown.findIndex(
+          (entity) => entity.id === preselectedOptionId,
+        );
+        onEntitySelected(entitiesInDropdown[entity]);
+      }
+
       resetScroll();
     },
     RelationPickerHotkeyScope.RelationPicker,
-    [entitiesInDropdown, hoveredIndex, onEntitySelected],
+    [entitiesInDropdown, preselectedOptionId, onEntitySelected],
   );
 
   useScopedHotkeys(
@@ -70,39 +91,56 @@ export const SingleEntitySelectBase = <
   );
 
   return (
-    <StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
+    <>
-      {emptyLabel && (
+      <StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
-        <MenuItem
+        {emptyLabel && (
-          onClick={() => onEntitySelected()}
+          <MenuItemSelect
-          LeftIcon={EmptyIcon}
+            onClick={() => onEntitySelected()}
-          text={emptyLabel}
+            LeftIcon={EmptyIcon}
-        />
+            text={emptyLabel}
-      )}
+            hovered={preselectedOptionId === EmptyButtonId}
-      {loading ? (
+            selected={!selectedEntity}
-        <DropdownMenuSkeletonItem />
-      ) : entitiesInDropdown.length === 0 ? (
-        <MenuItem text="No result" />
-      ) : (
-        entitiesInDropdown?.map((entity) => (
-          <MenuItemSelectAvatar
-            key={entity.id}
-            testId="menu-item"
-            selected={selectedEntity?.id === entity.id}
-            onClick={() => onEntitySelected(entity)}
-            text={entity.name}
-            hovered={hoveredIndex === entitiesInDropdown.indexOf(entity)}
-            avatar={
-              <Avatar
-                avatarUrl={entity.avatarUrl}
-                colorId={entity.id}
-                placeholder={entity.name}
-                size="md"
-                type={entity.avatarType ?? 'rounded'}
-              />
-            }
           />
-        ))
+        )}
+        {loading ? (
+          <DropdownMenuSkeletonItem />
+        ) : entitiesInDropdown.length === 0 ? (
+          <MenuItem text="No result" />
+        ) : (
+          entitiesInDropdown?.map((entity) => (
+            <MenuItemSelectAvatar
+              key={entity.id}
+              testId="menu-item"
+              selected={selectedEntity?.id === entity.id}
+              onClick={() => onEntitySelected(entity)}
+              text={entity.name}
+              hovered={preselectedOptionId === entity.id}
+              avatar={
+                <Avatar
+                  avatarUrl={entity.avatarUrl}
+                  colorId={entity.id}
+                  placeholder={entity.name}
+                  size="md"
+                  type={entity.avatarType ?? 'rounded'}
+                />
+              }
+            />
+          ))
+        )}
+      </StyledDropdownMenuItemsContainer>
+      {showCreateButton && (
+        <>
+          <StyledDropdownMenuItemsContainer hasMaxHeight>
+            <StyledDropdownMenuSeparator />
+            <CreateNewButton
+              onClick={onCreate}
+              LeftIcon={IconPlus}
+              text="Add New"
+              hovered={preselectedOptionId === CreateButtonId}
+            />
+          </StyledDropdownMenuItemsContainer>
+        </>
       )}
-    </StyledDropdownMenuItemsContainer>
+    </>
   );
 };

front/src/modules/ui/input/relation-picker/constants/index.ts

@@ -0,0 +1,2 @@
+export const CreateButtonId = 'create-button';
+export const EmptyButtonId = 'empty-button';

front/src/modules/ui/input/relation-picker/hooks/useEntitySelectScroll.ts

@@ -4,28 +4,36 @@ import { Key } from 'ts-key-enum';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
-import { relationPickerHoverIndexScopedState } from '../states/relationPickerHoverIndexScopedState';
+import { CreateButtonId } from '../constants';
-import { EntityForSelect } from '../types/EntityForSelect';
+import { RelationPickerRecoilScopeContext } from '../states/recoil-scope-contexts/RelationPickerRecoilScopeContext';
+import { relationPickerPreselectedIdScopedState } from '../states/relationPickerPreselectedIdScopedState';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
+import { getPreselectedIdIndex } from '../utils/getPreselectedIdIndex';
 
-export const useEntitySelectScroll = <
+export const useEntitySelectScroll = ({
-  CustomEntityForSelect extends EntityForSelect,
->({
   containerRef,
-  entities,
+  selectableOptionIds,
 }: {
-  entities: CustomEntityForSelect[];
+  selectableOptionIds: string[];
   containerRef: React.RefObject<HTMLDivElement>;
 }) => {
-  const [relationPickerHoverIndex, setRelationPickerHoverIndex] =
+  const [relationPickerPreselectedId, setRelationPickerPreselectedId] =
-    useRecoilScopedState(relationPickerHoverIndexScopedState);
+    useRecoilScopedState(
+      relationPickerPreselectedIdScopedState,
+      RelationPickerRecoilScopeContext,
+    );
+
+  const preselectedIdIndex = getPreselectedIdIndex(
+    selectableOptionIds,
+    relationPickerPreselectedId,
+  );
 
   const resetScroll = () => {
-    setRelationPickerHoverIndex(0);
+    setRelationPickerPreselectedId('');
 
-    const currentHoveredRef = containerRef.current?.children[0] as HTMLElement;
+    const preselectedRef = containerRef.current?.children[0] as HTMLElement;
 
-    scrollIntoView(currentHoveredRef, {
+    scrollIntoView(preselectedRef, {
       align: {
         top: 0,
       },
@@ -39,16 +47,15 @@ export const useEntitySelectScroll = <
   useScopedHotkeys(
     Key.ArrowUp,
     () => {
-      setRelationPickerHoverIndex((prevSelectedIndex) =>
+      const previousSelectableIndex = Math.max(preselectedIdIndex - 1, 0);
-        Math.max(prevSelectedIndex - 1, 0),
+      const previousSelectableId = selectableOptionIds[previousSelectableIndex];
-      );
+      setRelationPickerPreselectedId(previousSelectableId);
-
+      const preselectedRef = containerRef.current?.children[
-      const currentHoveredRef = containerRef.current?.children[
+        previousSelectableIndex
-        relationPickerHoverIndex
       ] as HTMLElement;
 
-      if (currentHoveredRef) {
+      if (preselectedRef) {
-        scrollIntoView(currentHoveredRef, {
+        scrollIntoView(preselectedRef, {
           align: {
             top: 0.5,
           },
@@ -60,38 +67,40 @@ export const useEntitySelectScroll = <
       }
     },
     RelationPickerHotkeyScope.RelationPicker,
-    [setRelationPickerHoverIndex, entities],
+    [selectableOptionIds],
   );
 
   useScopedHotkeys(
     Key.ArrowDown,
     () => {
-      setRelationPickerHoverIndex((prevSelectedIndex) =>
+      const nextSelectableIndex = Math.min(
-        Math.min(prevSelectedIndex + 1, (entities?.length ?? 0) - 1),
+        preselectedIdIndex + 1,
+        selectableOptionIds?.length - 1,
       );
+      const nextSelectableId = selectableOptionIds[nextSelectableIndex];
+      setRelationPickerPreselectedId(nextSelectableId);
+      if (nextSelectableId !== CreateButtonId) {
+        const preselectedRef = containerRef.current?.children[
+          nextSelectableIndex
+        ] as HTMLElement;
 
-      const currentHoveredRef = containerRef.current?.children[
+        if (preselectedRef) {
-        relationPickerHoverIndex
+          scrollIntoView(preselectedRef, {
-      ] as HTMLElement;
+            align: {
-
+              top: 0.15,
-      if (currentHoveredRef) {
+            },
-        scrollIntoView(currentHoveredRef, {
+            isScrollable: (target) => target === containerRef.current,
-          align: {
+            time: 0,
-            top: 0.15,
+          });
-          },
+        }
-          isScrollable: (target) => {
-            return target === containerRef.current;
-          },
-          time: 0,
-        });
       }
     },
     RelationPickerHotkeyScope.RelationPicker,
-    [setRelationPickerHoverIndex, entities],
+    [selectableOptionIds],
   );
 
   return {
-    hoveredIndex: relationPickerHoverIndex,
+    preselectedOptionId: relationPickerPreselectedId,
     resetScroll,
   };
 };

front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts

@@ -3,12 +3,14 @@ import debounce from 'lodash.debounce';
 
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
-import { relationPickerHoverIndexScopedState } from '../states/relationPickerHoverIndexScopedState';
+import { RelationPickerRecoilScopeContext } from '../states/recoil-scope-contexts/RelationPickerRecoilScopeContext';
+import { relationPickerPreselectedIdScopedState } from '../states/relationPickerPreselectedIdScopedState';
 import { relationPickerSearchFilterScopedState } from '../states/relationPickerSearchFilterScopedState';
 
 export const useEntitySelectSearch = () => {
-  const [, setRelationPickerHoverIndex] = useRecoilScopedState(
+  const [, setRelationPickerPreselectedId] = useRecoilScopedState(
-    relationPickerHoverIndexScopedState,
+    relationPickerPreselectedIdScopedState,
+    RelationPickerRecoilScopeContext,
   );
 
   const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
@@ -26,7 +28,7 @@ export const useEntitySelectSearch = () => {
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     debouncedSetSearchFilter(event.currentTarget.value);
-    setRelationPickerHoverIndex(0);
+    setRelationPickerPreselectedId('');
   };
 
   useEffect(() => {

front/src/modules/ui/input/relation-picker/states/recoil-scope-contexts/RelationPickerRecoilScopeContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+export const RelationPickerRecoilScopeContext = createContext<string | null>(
+  'relation-picker-context',
+);

front/src/modules/ui/input/relation-picker/states/relationPickerHoverIndexScopedState.ts

@@ -1,6 +0,0 @@
-import { atomFamily } from 'recoil';
-
-export const relationPickerHoverIndexScopedState = atomFamily<number, string>({
-  key: 'relationPickerHoverIndexScopedState',
-  default: 0,
-});

front/src/modules/ui/input/relation-picker/states/relationPickerPreselectedIdScopedState.ts

@@ -0,0 +1,9 @@
+import { atomFamily } from 'recoil';
+
+export const relationPickerPreselectedIdScopedState = atomFamily<
+  string,
+  string
+>({
+  key: 'relationPickerPreselectedIdScopedState',
+  default: (param) => param,
+});

front/src/modules/ui/input/relation-picker/utils/getPreselectedIdIndex.ts

@@ -0,0 +1,10 @@
+export const getPreselectedIdIndex = (
+  selectableOptionIds: string[],
+  preselectedOptionId: string,
+) => {
+  const preselectedIdIndex = selectableOptionIds.findIndex(
+    (option) => option === preselectedOptionId,
+  );
+
+  return preselectedIdIndex === -1 ? 0 : preselectedIdIndex;
+};