From 013eda4a321c01adee1aaf77a5432e061524b6ba Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Tue, 10 Dec 2024 16:01:03 +0100 Subject: [PATCH] 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. --- .../RecordIndexActionMenuDropdown.tsx | 8 +++----- ...riteFolderNavigationDrawerItemDropdown.tsx | 1 - .../RecordTableCellBaseContainer.tsx | 9 --------- .../RecordTableCellDisplayContainer.tsx | 3 +++ .../components/RecordTableCellDisplayMode.tsx | 19 ++++++++++++------- .../RecordTableCellSoftFocusMode.tsx | 10 ++++++++++ .../hooks/useTriggerActionMenuDropdown.ts | 11 +++++++++++ .../RecordTableColumnHeadWithDropdown.tsx | 1 - .../layout/dropdown/components/Dropdown.tsx | 4 +++- .../dropdown/components/DropdownContent.tsx | 19 +++++++++++++++++-- .../components/ShowPageAddButton.tsx | 6 +++--- 11 files changed, 62 insertions(+), 29 deletions(-) diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx index 1a62cab35..ed7fa1d7d 100644 --- 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` 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` 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 = () => { ))} } + avoidPortal /> ); diff --git a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx b/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx index d3ca03116..87a3dfdaf 100644 --- 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={ diff --git 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 index 52ae0772d..b7ef7b393 100644 --- 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 } diff --git 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 index 9197022f8..c172bb8e0 100644 --- 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; isHovered?: boolean; + onContextMenu?: (event: React.MouseEvent) => void; }; export const RecordTableCellDisplayContainer = ({ @@ -33,6 +34,7 @@ export const RecordTableCellDisplayContainer = ({ softFocus, onClick, scrollRef, + onContextMenu, }: React.PropsWithChildren) => ( {children} diff --git 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 index f562348e7..868990a61 100644 --- 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 ( - + {children} ); diff --git 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 index b2210fce3..b159c79c0 100644 --- 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 ? ( <> diff --git 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 index 5732978ac..17360942f 100644 --- 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, ], ); diff --git 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 index adb91a3ec..473e92c79 100644 --- 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={} dropdownComponents={} dropdownOffset={{ x: -1 }} - usePortal dropdownPlacement="bottom-start" dropdownHotkeyScope={{ scope: column.fieldMetadataId + '-header' }} /> diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx index 2c45e4fba..cf484a1fb 100644 --- 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} /> )} { const { isDropdownOpen, closeDropdown, dropdownWidth, setDropdownPlacement } = useDropdown(dropdownId); @@ -111,7 +113,7 @@ export const DropdownContent = ({ {hotkey && onHotkeyTriggered && ( )} - + {avoidPortal ? ( {dropdownComponents} - + ) : ( + + + {dropdownComponents} + + + )} ); }; diff --git 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 index 70084c422..89ee69614 100644 --- 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], });