admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: prevent command menu from closing when clicking items in slash menu (#12555)

Browse Source 
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>
This commit is contained in:
Naifer
2025-06-12 10:30:10 +01:00
committed by GitHub
parent 10b97d56d4
commit cb5a895963
3 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx
View File

@ -4,6 +4,7 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant'; import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope'; import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
import { RECORD_CHIP_CLICK_OUTSIDE_ID } from '@/object-record/record-table/constants/RecordChipClickOutsideId'; 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 { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId'; 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'; import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
@ -70,6 +71,7 @@ export const CommandMenuOpenContainer = ({
PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID, PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID,
LINK_CHIP_CLICK_OUTSIDE_ID, LINK_CHIP_CLICK_OUTSIDE_ID,
RECORD_CHIP_CLICK_OUTSIDE_ID, RECORD_CHIP_CLICK_OUTSIDE_ID,
SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
], ],
}); });

2
packages/twenty-front/src/modules/ui/input/constants/SlashMenuDropdownClickOutsideId.ts Normal file
View File

@ -0,0 +1,2 @@
export const SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID =
'slash-menu-dropdown-click-outside-id';

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

@ -1,6 +1,7 @@
import type { SuggestionMenuProps } from '@blocknote/react'; import type { SuggestionMenuProps } from '@blocknote/react';
import styled from '@emotion/styled'; 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 { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer'; import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
@ -44,7 +45,11 @@ export const CustomSlashMenu = (props: CustomSlashMenuProps) => {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 0.1 }} transition={{ duration: 0.1 }}
> >
<OverlayContainer ref={refs.setFloating} style={floatingStyles}> <OverlayContainer
ref={refs.setFloating}
style={floatingStyles}
data-click-outside-id={SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
>
<StyledInnerContainer> <StyledInnerContainer>
<DropdownContent> <DropdownContent>
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer>