diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx index 0d96a2759748..5ee3a8377902 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx @@ -85,7 +85,7 @@ export const useDeleteSingleRecordAction: ActionHookWithObjectMetadataItem = ({ onConfirmClick={() => { handleDeleteClick(); if (isInRightDrawer) { - closeRightDrawer(); + closeRightDrawer({ emitCloseEvent: false }); } }} deleteButtonText={'Delete Record'} diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx index f866de7ed52a..0ef913ea4759 100644 --- a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx +++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx @@ -120,6 +120,7 @@ export const ConfirmationModal = ({ isClosable={true} padding="large" modalVariant={modalVariant} + className="confirmation-modal" > diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerContainer.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerContainer.tsx index 901d8ecfb01a..01bd2aef12bf 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerContainer.tsx @@ -42,6 +42,7 @@ export const RightDrawerContainer = ({ rightDrawerRef, ...(workflowReactFlowRef ? [workflowReactFlowRef] : []), ], + excludeClassNames: ['confirmation-modal'], listenerId: RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID, callback: useRecoilCallback( ({ snapshot, set }) => diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx index d56a5f22f72c..847f33143738 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx @@ -10,7 +10,7 @@ export const RightDrawerTopBarExpandButton = ({ to }: { to: string }) => { size="medium" accent="tertiary" Icon={IconExternalLink} - onClick={closeRightDrawer} + onClick={() => closeRightDrawer()} /> ); diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts index b13ee0954fac..e659eb936f09 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts @@ -7,6 +7,7 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent'; import { mapRightDrawerPageToCommandMenuPage } from '@/ui/layout/right-drawer/utils/mapRightDrawerPageToCommandMenuPage'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; +import { isDefined } from 'twenty-shared'; import { IconComponent } from 'twenty-ui'; import { FeatureFlagKey } from '~/generated/graphql'; import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState'; @@ -56,10 +57,12 @@ export const useRightDrawer = () => { const closeRightDrawer = useRecoilCallback( ({ set }) => - () => { + (args?: { emitCloseEvent?: boolean }) => { set(isRightDrawerOpenState, false); set(isRightDrawerMinimizedState, false); - emitRightDrawerCloseEvent(); + if (isDefined(args?.emitCloseEvent) && args?.emitCloseEvent) { + emitRightDrawerCloseEvent(); + } }, [], ); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts index 60c45d49eda2..587ec6d70b88 100644 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts @@ -157,26 +157,26 @@ export const useListenClickOutside = ({ .getLoadable(getClickOutsideListenerMouseDownHappenedState) .getValue(); - if (mode === ClickOutsideMode.compareHTMLRef) { - const clickedElement = event.target as HTMLElement; - let isClickedOnExcluded = false; - let currentElement: HTMLElement | null = clickedElement; - - while (currentElement) { - const currentClassList = currentElement.classList; + const clickedElement = event.target as HTMLElement; + let isClickedOnExcluded = false; + let currentElement: HTMLElement | null = clickedElement; - isClickedOnExcluded = - excludeClassNames?.some((className) => - currentClassList.contains(className), - ) ?? false; + while (currentElement) { + const currentClassList = currentElement.classList; - if (isClickedOnExcluded) { - break; - } + isClickedOnExcluded = + excludeClassNames?.some((className) => + currentClassList.contains(className), + ) ?? false; - currentElement = currentElement.parentElement; + if (isClickedOnExcluded) { + break; } + currentElement = currentElement.parentElement; + } + + if (mode === ClickOutsideMode.compareHTMLRef) { const clickedOnAtLeastOneRef = refs .filter((ref) => !!ref.current) .some((ref) => ref.current?.contains(event.target as Node)); @@ -244,7 +244,8 @@ export const useListenClickOutside = ({ !clickedOnAtLeastOneRef && !isMouseDownInside && isListening && - hasMouseDownHappened; + hasMouseDownHappened && + !isClickedOnExcluded; if (CLICK_OUTSIDE_DEBUG_MODE) { // eslint-disable-next-line no-console @@ -255,6 +256,7 @@ export const useListenClickOutside = ({ isMouseDownInside, isListening, hasMouseDownHappened, + isClickedOnExcluded, hotkeyScope, enabled, event,