feat: add auto-scroll to selected menu items in CustomSlashMenu (#13048)

to resolve the issue #13047 

It's my first contribution, I hope it's good enough!

When using the slash command (/) in the notes editor, a menu of commands
appears. When navigating this menu with the up and down arrow keys, the
selection changes, but the menu itself does not scroll. This means that
as the list of commands is long, items outside the visible area cannot
be seen when selected.


The issue was located in the [CustomSlashMenu.tsx] component. The menu
container didn't have vertical scrolling enabled, and there was no logic
to scroll the active item into the visible area.

The fix involved:

Adding overflow-y: auto to the menu's styled container in
[CustomSlashMenu.tsx].
Modifying the [DropdownMenuItemsContainer] component to accept and
forward a ref using React.forwardRef.
Implementing a useEffect hook in [CustomSlashMenu.tsx] that triggers on
selection change. This hook uses a ref to the items container to call
scrollIntoView({ block: 'nearest' }) on the currently selected menu
item.

---------

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

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx

@@ -17,7 +17,7 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel
 import { isInlineCellInEditModeScopedState } from '@/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState';
 import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
-import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 import { useIcons } from 'twenty-ui/display';
@@ -129,17 +129,17 @@ export const RecordInlineCell = ({
   const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback(
     ({ snapshot }) =>
       (persistField, event) => {
-        const currentFocusId = snapshot
+        const currentDropdownFocusId = snapshot
-          .getLoadable(currentFocusIdSelector)
+          .getLoadable(activeDropdownFocusIdState)
           .getValue();
 
-        const expectedFocusId = getDropdownFocusIdForRecordField(
+        const expectedDropdownFocusId = getDropdownFocusIdForRecordField(
           recordId,
           fieldDefinition.fieldMetadataId,
           'inline-cell',
         );
 
-        if (currentFocusId !== expectedFocusId) {
+        if (currentDropdownFocusId !== expectedDropdownFocusId) {
           return;
         }
         event.preventDefault();

packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItems.tsx

@@ -12,7 +12,6 @@ import { getMultipleRecordPickerSelectableListId } from '@/object-record/record-
 import { RecordPickerPickableMorphItem } from '@/object-record/record-picker/types/RecordPickerPickableMorphItem';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
-import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -39,10 +38,6 @@ export const MultipleRecordPickerMenuItems = ({
     componentInstanceId,
   );
 
-  const { resetSelectedItem } = useSelectableList(
-    selectableListComponentInstanceId,
-  );
-
   const multipleRecordPickerPickableMorphItemsState =
     useRecoilComponentCallbackStateV2(
       multipleRecordPickerPickableMorphItemsComponentState,
@@ -107,7 +102,6 @@ export const MultipleRecordPickerMenuItems = ({
                 onChange={(morphItem) => {
                   handleChange(morphItem);
                   onChange?.(morphItem);
-                  resetSelectedItem();
                 }}
               />
             );

packages/twenty-front/src/modules/ui/input/constants/SlashMenuListId.ts

@@ -0,0 +1 @@
+export const SLASH_MENU_LIST_ID = 'editor-slash-menu-list';

packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx

@@ -1,42 +1,51 @@
-import type { SuggestionMenuProps } from '@blocknote/react';
 import styled from '@emotion/styled';
+import { autoUpdate, useFloating } from '@floating-ui/react';
+import { motion } from 'framer-motion';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 
 import { SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/ui/input/constants/SlashMenuDropdownClickOutsideId';
+import { SLASH_MENU_LIST_ID } from '@/ui/input/constants/SlashMenuListId';
+import { CustomSlashMenuListItem } from '@/ui/input/editor/components/CustomSlashMenuListItem';
+import {
+  CustomSlashMenuProps,
+  SuggestionItem,
+} from '@/ui/input/editor/components/types';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
-import { autoUpdate, useFloating } from '@floating-ui/react';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
-import { motion } from 'framer-motion';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { createPortal } from 'react-dom';
+import { isDefined } from 'twenty-shared/utils';
-import { IconComponent } from 'twenty-ui/display';
-import { MenuItemSuggestion } from 'twenty-ui/navigation';
 
-export type SuggestionItem = {
+export type { SuggestionItem };
-  title: string;
-  onItemClick: () => void;
-  aliases?: string[];
-  Icon?: IconComponent;
-};
-
-type CustomSlashMenuProps = SuggestionMenuProps<SuggestionItem>;
 
 const StyledContainer = styled.div`
   height: 1px;
   width: 1px;
 `;
 
-const StyledInnerContainer = styled.div`
+export const CustomSlashMenu = ({
-  color: ${({ theme }) => theme.font.color.secondary};
+  items,
-  height: 250px;
+  selectedIndex,
-  width: 100%;
+}: CustomSlashMenuProps) => {
-`;
-
-export const CustomSlashMenu = (props: CustomSlashMenuProps) => {
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom-start',
     whileElementsMounted: autoUpdate,
   });
 
+  const { setSelectedItemId } = useSelectableList(SLASH_MENU_LIST_ID);
+
+  useEffect(() => {
+    if (!isDefined(selectedIndex)) return;
+
+    const selectedItem = items[selectedIndex];
+
+    if (isDefined(selectedItem)) {
+      setSelectedItemId(selectedItem.title);
+    }
+  }, [items, selectedIndex, setSelectedItemId]);
+
   return (
     <StyledContainer ref={refs.setReference}>
       {createPortal(
@@ -50,21 +59,19 @@ export const CustomSlashMenu = (props: CustomSlashMenuProps) => {
             style={floatingStyles}
             data-click-outside-id={SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
           >
-            <StyledInnerContainer>
             <DropdownContent>
-                <DropdownMenuItemsContainer>
+              <DropdownMenuItemsContainer hasMaxHeight>
-                  {props.items.map((item, index) => (
+                <SelectableList
-                    <MenuItemSuggestion
+                  focusId={SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
-                      key={item.title}
+                  selectableListInstanceId={SLASH_MENU_LIST_ID}
-                      onClick={() => item.onItemClick()}
+                  selectableItemIdArray={items.map((item) => item.title)}
-                      text={item.title}
+                >
-                      LeftIcon={item.Icon}
+                  {items.map((item) => (
-                      selected={props.selectedIndex === index}
+                    <CustomSlashMenuListItem key={item.title} item={item} />
-                    />
                   ))}
+                </SelectableList>
               </DropdownMenuItemsContainer>
             </DropdownContent>
-            </StyledInnerContainer>
           </OverlayContainer>
         </motion.div>,
         document.body,

packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenuListItem.tsx

@@ -0,0 +1,38 @@
+import { SLASH_MENU_LIST_ID } from '@/ui/input/constants/SlashMenuListId';
+import { SuggestionItem } from '@/ui/input/editor/components/types';
+import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+import { MenuItemSuggestion } from 'twenty-ui/navigation';
+
+export type CustomSlashMenuListItemProps = {
+  item: SuggestionItem;
+};
+
+export const CustomSlashMenuListItem = ({
+  item,
+}: CustomSlashMenuListItemProps) => {
+  const { resetSelectedItem } = useSelectableList(SLASH_MENU_LIST_ID);
+
+  const isSelectedItem = useRecoilComponentFamilyValueV2(
+    isSelectedItemIdComponentFamilySelector,
+    item.title,
+  );
+
+  const handleClick = () => {
+    resetSelectedItem();
+    item.onItemClick();
+  };
+
+  return (
+    <SelectableListItem itemId={item.title} onEnter={handleClick}>
+      <MenuItemSuggestion
+        selected={isSelectedItem}
+        onClick={handleClick}
+        LeftIcon={item.Icon}
+        text={item.title}
+      />
+    </SelectableListItem>
+  );
+};

packages/twenty-front/src/modules/ui/input/editor/components/types.ts

@@ -0,0 +1,11 @@
+import type { SuggestionMenuProps } from '@blocknote/react';
+import { IconComponent } from 'twenty-ui/display';
+
+export type SuggestionItem = {
+  title: string;
+  onItemClick: () => void;
+  aliases?: string[];
+  Icon?: IconComponent;
+};
+
+export type CustomSlashMenuProps = SuggestionMenuProps<SuggestionItem>;

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

@@ -3,8 +3,17 @@ import { ReactNode, useEffect, useRef } from 'react';
 import { SelectableListItemHotkeyEffect } from '@/ui/layout/selectable-list/components/SelectableListItemHotkeyEffect';
 import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 
+const StyledListItemContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+`;
+
 export type SelectableListItemProps = {
   itemId: string;
   children: ReactNode;
@@ -21,11 +30,14 @@ export const SelectableListItem = ({
     itemId,
   );
 
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const listItemRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (isSelectedItemId) {
-      scrollRef.current?.scrollIntoView({ block: 'nearest' });
+      listItemRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
     }
   }, [isSelectedItemId]);
 
@@ -34,7 +46,9 @@ export const SelectableListItem = ({
       {isSelectedItemId && isDefined(onEnter) && (
         <SelectableListItemHotkeyEffect itemId={itemId} onEnter={onEnter} />
       )}
+      <StyledListItemContainer ref={listItemRef}>
         {children}
+      </StyledListItemContainer>
     </>
   );
 };