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.
2024-12-10 16:01:03 +01:00
parent b0595e452a
commit 013eda4a32
11 changed files with 62 additions and 29 deletions
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
+++ b/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>
  );
--- a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx
+++ b/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>
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx
+++ b/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
        }
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx
+++ b/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>
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx
+++ b/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) {
-    return <></>;
-  }
+  const handleActionMenuDropdown = (event: React.MouseEvent) => {
+    onActionMenuDropdownOpened(event, recordId);
+  };

  return (
-    <RecordTableCellDisplayContainer softFocus={softFocus}>
+    <RecordTableCellDisplayContainer
+      softFocus={softFocus}
+      onContextMenu={handleActionMenuDropdown}
+    >
      {children}
    </RecordTableCellDisplayContainer>
  );
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
+++ b/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 ? (
          <></>
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts
+++ b/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,
    ],
  );

--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
+++ b/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' }}
    />
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/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
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx
+++ b/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>
+      )}
    </>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ b/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],
      });
-    }
-    if (objectNameSingular === CoreObjectNameSingular.Task) {
+    } else if (objectNameSingular === CoreObjectNameSingular.Task) {
      openTask({
        targetableObjects: [activityTargetObject],
      });