From cb5a895963c17f9666ef5f809443463e191054d9 Mon Sep 17 00:00:00 2001 From: Naifer <161821705+omarNaifer12@users.noreply.github.com> Date: Thu, 12 Jun 2025 10:30:10 +0100 Subject: [PATCH] fix: prevent command menu from closing when clicking items in slash menu (#12555) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit resolve #12540 Prevent command menu from closing by adding new excludedClickOutsideIds constant. https://github.com/user-attachments/assets/965075d5-d592-4d50-bb5a-1b2bb561e55a --------- Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com> --- .../command-menu/components/CommandMenuOpenContainer.tsx | 2 ++ .../ui/input/constants/SlashMenuDropdownClickOutsideId.ts | 2 ++ .../modules/ui/input/editor/components/CustomSlashMenu.tsx | 7 ++++++- 3 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 packages/twenty-front/src/modules/ui/input/constants/SlashMenuDropdownClickOutsideId.ts diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx index 3cabd0b78..06711cdb2 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx @@ -4,6 +4,7 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant'; import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope'; import { RECORD_CHIP_CLICK_OUTSIDE_ID } from '@/object-record/record-table/constants/RecordChipClickOutsideId'; +import { SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/ui/input/constants/SlashMenuDropdownClickOutsideId'; import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices'; import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId'; import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; @@ -70,6 +71,7 @@ export const CommandMenuOpenContainer = ({ PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID, LINK_CHIP_CLICK_OUTSIDE_ID, RECORD_CHIP_CLICK_OUTSIDE_ID, + SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID, ], }); diff --git a/packages/twenty-front/src/modules/ui/input/constants/SlashMenuDropdownClickOutsideId.ts b/packages/twenty-front/src/modules/ui/input/constants/SlashMenuDropdownClickOutsideId.ts new file mode 100644 index 000000000..46440fde2 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/input/constants/SlashMenuDropdownClickOutsideId.ts @@ -0,0 +1,2 @@ +export const SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID = + 'slash-menu-dropdown-click-outside-id'; diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx index 2002b9bbd..aa360c8bc 100644 --- a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx +++ b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx @@ -1,6 +1,7 @@ import type { SuggestionMenuProps } from '@blocknote/react'; import styled from '@emotion/styled'; +import { SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/ui/input/constants/SlashMenuDropdownClickOutsideId'; import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer'; @@ -44,7 +45,11 @@ export const CustomSlashMenu = (props: CustomSlashMenuProps) => { animate={{ opacity: 1 }} transition={{ duration: 0.1 }} > - +