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 { 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,
],
});

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 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 }}
>
<OverlayContainer ref={refs.setFloating} style={floatingStyles}>
<OverlayContainer
ref={refs.setFloating}
style={floatingStyles}
data-click-outside-id={SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
>
<StyledInnerContainer>
<DropdownContent>
<DropdownMenuItemsContainer>