Fixed dropdown bugs on 0.34 (#9000)

- New task dropdown wasn't using the proper dropdown id
- Action menu triggered by context menu (right click) on table cell was
listening in edit mode.

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx

@@ -21,10 +21,6 @@ type StyledContainerProps = {
 
 const StyledContainerActionMenuDropdown = styled.div<StyledContainerProps>`
   align-items: flex-start;
-  background: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
   display: flex;
   flex-direction: column;
 
@@ -33,7 +29,8 @@ const StyledContainerActionMenuDropdown = styled.div<StyledContainerProps>`
   top: ${(props) => `${props.position.y}px`};
 
   transform: translateX(-50%);
-  width: auto;
+  width: 0;
+  height: 0;
 `;
 
 export const RecordIndexActionMenuDropdown = () => {
@@ -84,6 +81,7 @@ export const RecordIndexActionMenuDropdown = () => {
             ))}
           </DropdownMenuItemsContainer>
         }
+        avoidPortal
       />
     </StyledContainerActionMenuDropdown>
   );

packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx

@@ -47,7 +47,6 @@ export const FavoriteFolderNavigationDrawerItemDropdown = ({
       dropdownHotkeyScope={{
         scope: FavoriteFolderHotkeyScope.FavoriteFolderRightIconDropdown,
       }}
-      usePortal
       data-select-disable
       clickableComponent={
         <StyledIconContainer>

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx

@@ -7,7 +7,6 @@ import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'
 import { CellHotkeyScopeContext } from '@/object-record/record-table/contexts/CellHotkeyScopeContext';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
-import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import {
   DEFAULT_CELL_SCOPE,
   useOpenRecordTableCellFromCell,
@@ -44,7 +43,6 @@ export const RecordTableCellBaseContainer = ({
   const { setIsFocused } = useFieldFocus();
   const { openTableCell } = useOpenRecordTableCellFromCell();
   const { theme } = useContext(ThemeContext);
-  const { recordId } = useContext(RecordTableRowContext);
 
   const { hasSoftFocus, cellPosition } = useContext(RecordTableCellContext);
 
@@ -71,12 +69,6 @@ export const RecordTableCellBaseContainer = ({
     }
   };
 
-  const { onActionMenuDropdownOpened } = useContext(RecordTableContext);
-
-  const handleActionMenuDropdown = (event: React.MouseEvent) => {
-    onActionMenuDropdownOpened(event, recordId);
-  };
-
   const { hotkeyScope } = useContext(FieldContext);
 
   const editHotkeyScope = { scope: hotkeyScope ?? DEFAULT_CELL_SCOPE };
@@ -87,7 +79,6 @@ export const RecordTableCellBaseContainer = ({
         onMouseLeave={handleContainerMouseLeave}
         onMouseMove={handleContainerMouseMove}
         onClick={handleContainerClick}
-        onContextMenu={handleActionMenuDropdown}
         backgroundColorTransparentSecondary={
           theme.background.transparent.secondary
         }

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx

@@ -26,6 +26,7 @@ export type EditableCellDisplayContainerProps = {
   onClick?: () => void;
   scrollRef?: Ref<HTMLDivElement>;
   isHovered?: boolean;
+  onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 };
 
 export const RecordTableCellDisplayContainer = ({
@@ -33,6 +34,7 @@ export const RecordTableCellDisplayContainer = ({
   softFocus,
   onClick,
   scrollRef,
+  onContextMenu,
 }: React.PropsWithChildren<EditableCellDisplayContainerProps>) => (
   <StyledOuterContainer
     data-testid={
@@ -41,6 +43,7 @@ export const RecordTableCellDisplayContainer = ({
     onClick={onClick}
     ref={scrollRef}
     hasSoftFocus={softFocus}
+    onContextMenu={onContextMenu}
   >
     <StyledInnerContainer>{children}</StyledInnerContainer>
   </StyledOuterContainer>

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx

@@ -1,19 +1,24 @@
-import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-
+import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
+import { useContext } from 'react';
 import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer';
 
 export const RecordTableCellDisplayMode = ({
   children,
   softFocus,
 }: React.PropsWithChildren<{ softFocus?: boolean }>) => {
-  const isEmpty = useIsFieldEmpty();
+  const { onActionMenuDropdownOpened } = useContext(RecordTableContext);
+  const { recordId } = useContext(FieldContext);
 
-  if (isEmpty) {
+  const handleActionMenuDropdown = (event: React.MouseEvent) => {
-    return <></>;
+    onActionMenuDropdownOpened(event, recordId);
-  }
+  };
 
   return (
-    <RecordTableCellDisplayContainer softFocus={softFocus}>
+    <RecordTableCellDisplayContainer
+      softFocus={softFocus}
+      onContextMenu={handleActionMenuDropdown}
+    >
       {children}
     </RecordTableCellDisplayContainer>
   );

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx

@@ -19,7 +19,9 @@ import { isDefined } from '~/utils/isDefined';
 
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
+import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer';
 
 type RecordTableCellSoftFocusModeProps = {
@@ -32,6 +34,7 @@ export const RecordTableCellSoftFocusMode = ({
   nonEditModeContent,
 }: RecordTableCellSoftFocusModeProps) => {
   const { columnIndex } = useContext(RecordTableCellContext);
+  const { recordId } = useContext(FieldContext);
 
   const isFieldReadOnly = useIsFieldValueReadOnly();
 
@@ -132,6 +135,12 @@ export const RecordTableCellSoftFocusMode = ({
     */
   };
 
+  const { onActionMenuDropdownOpened } = useContext(RecordTableContext);
+
+  const handleActionMenuDropdown = (event: React.MouseEvent) => {
+    onActionMenuDropdownOpened(event, recordId);
+  };
+
   const isFirstColumn = columnIndex === 0;
   const customButtonIcon = useGetButtonIcon();
   const buttonIcon = isFirstColumn
@@ -152,6 +161,7 @@ export const RecordTableCellSoftFocusMode = ({
         onClick={handleClick}
         scrollRef={scrollRef}
         softFocus
+        onContextMenu={handleActionMenuDropdown}
       >
         {dontShowContent ? (
           <></>

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts

@@ -6,6 +6,7 @@ import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBar
 import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
+import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@@ -40,6 +41,9 @@ export const useTriggerActionMenuDropdown = ({
     instanceId: getActionBarIdFromActionMenuId(actionMenuInstanceId),
   });
 
+  const { setActiveDropdownFocusIdAndMemorizePrevious } =
+    useSetActiveDropdownFocusIdAndMemorizePrevious();
+
   const triggerActionMenuDropdown = useRecoilCallback(
     ({ set, snapshot }) =>
       (event: React.MouseEvent, recordId: string) => {
@@ -61,12 +65,19 @@ export const useTriggerActionMenuDropdown = ({
 
         set(isActionBarOpenState, false);
         set(isActionMenuDropdownOpenState, true);
+
+        const actionMenuDropdownId =
+          getActionMenuDropdownIdFromActionMenuId(actionMenuInstanceId);
+
+        setActiveDropdownFocusIdAndMemorizePrevious(actionMenuDropdownId);
       },
     [
       isActionBarOpenState,
       isActionMenuDropdownOpenState,
       isRowSelectedFamilyState,
       recordIndexActionMenuDropdownPositionState,
+      setActiveDropdownFocusIdAndMemorizePrevious,
+      actionMenuInstanceId,
     ],
   );
 

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx

@@ -47,7 +47,6 @@ export const RecordTableColumnHeadWithDropdown = ({
       clickableComponent={<RecordTableColumnHead column={column} />}
       dropdownComponents={<RecordTableColumnHeadDropdownMenu column={column} />}
       dropdownOffset={{ x: -1 }}
-      usePortal
       dropdownPlacement="bottom-start"
       dropdownHotkeyScope={{ scope: column.fieldMetadataId + '-header' }}
     />

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

@@ -39,9 +39,9 @@ type DropdownProps = {
   dropdownStrategy?: 'fixed' | 'absolute';
   disableBlur?: boolean;
   onClickOutside?: () => void;
-  usePortal?: boolean;
   onClose?: () => void;
   onOpen?: () => void;
+  avoidPortal?: boolean;
 };
 
 export const Dropdown = ({
@@ -59,6 +59,7 @@ export const Dropdown = ({
   onClickOutside,
   onClose,
   onOpen,
+  avoidPortal,
 }: DropdownProps) => {
   const { isDropdownOpen, toggleDropdown } = useDropdown(dropdownId);
 
@@ -132,6 +133,7 @@ export const Dropdown = ({
               hotkey={hotkey}
               onClickOutside={onClickOutside}
               onHotkeyTriggered={toggleDropdown}
+              avoidPortal={avoidPortal}
             />
           )}
           <DropdownOnToggleEffect

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

@@ -36,6 +36,7 @@ export type DropdownContentProps = {
   dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number;
   dropdownComponents: React.ReactNode;
   parentDropdownId?: string;
+  avoidPortal?: boolean;
 };
 
 export const DropdownContent = ({
@@ -51,6 +52,7 @@ export const DropdownContent = ({
   disableBlur,
   dropdownMenuWidth,
   dropdownComponents,
+  avoidPortal,
 }: DropdownContentProps) => {
   const { isDropdownOpen, closeDropdown, dropdownWidth, setDropdownPlacement } =
     useDropdown(dropdownId);
@@ -111,7 +113,7 @@ export const DropdownContent = ({
       {hotkey && onHotkeyTriggered && (
         <HotkeyEffect hotkey={hotkey} onHotkeyTriggered={onHotkeyTriggered} />
       )}
-      <FloatingPortal>
+      {avoidPortal ? (
         <DropdownMenu
           className={className}
           disableBlur={disableBlur}
@@ -122,7 +124,20 @@ export const DropdownContent = ({
         >
           {dropdownComponents}
         </DropdownMenu>
-      </FloatingPortal>
+      ) : (
+        <FloatingPortal>
+          <DropdownMenu
+            className={className}
+            disableBlur={disableBlur}
+            width={dropdownMenuWidth ?? dropdownWidth}
+            data-select-disable
+            ref={floatingUiRefs.setFloating}
+            style={dropdownMenuStyles}
+          >
+            {dropdownComponents}
+          </DropdownMenu>
+        </FloatingPortal>
+      )}
     </>
   );
 };

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -30,7 +30,8 @@ export const ShowPageAddButton = ({
 }: {
   activityTargetObject: ActivityTargetableObject;
 }) => {
-  const { closeDropdown } = useDropdown('add-show-page');
+  const { closeDropdown } = useDropdown(SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID);
+
   const openNote = useOpenCreateActivityDrawer({
     activityObjectNameSingular: CoreObjectNameSingular.Note,
   });
@@ -43,8 +44,7 @@ export const ShowPageAddButton = ({
       openNote({
         targetableObjects: [activityTargetObject],
       });
-    }
+    } else if (objectNameSingular === CoreObjectNameSingular.Task) {
-    if (objectNameSingular === CoreObjectNameSingular.Task) {
       openTask({
         targetableObjects: [activityTargetObject],
       });