10004 tasks will not delete in people view (twentyhq#10039)

Fixes twentyhq#10004 - Fixed `useListenClickOutside` which wasn't working with `excludeClassNames` for `comparePixels` mode - Added `emitCloseEvent` parameter to the `closeRightDrawer` function because closing the right drawer after deleting a note or a task was triggering an update after the deletion. This bug was only for the old version of the command menu.
mind-developer · Feb 7, 2025 · 9a2a230 · 9a2a230
1 parent a3bb8e0
commit 9a2a230
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 20 deletions.
diff --git a/...es/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx b/...es/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
@@ -120,6 +120,7 @@ export const ConfirmationModal = ({
             isClosable={true}
             padding="large"
             modalVariant={modalVariant}
+            className="confirmation-modal"
           >
             <StyledCenteredTitle>
               <H1Title title={title} fontColor={H1TitleFontColor.Primary} />

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
@@ -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/...nty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx b/...nty-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()}
       />
     </UndecoratedLink>
   );

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
@@ -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
@@ -157,26 +157,26 @@ export const useListenClickOutside = <T extends Element>({
           .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 = <T extends Element>({
             !clickedOnAtLeastOneRef &&
             !isMouseDownInside &&
             isListening &&
-            hasMouseDownHappened;
+            hasMouseDownHappened &&
+            !isClickedOnExcluded;
 
           if (CLICK_OUTSIDE_DEBUG_MODE) {
             // eslint-disable-next-line no-console
@@ -255,6 +256,7 @@ export const useListenClickOutside = <T extends Element>({
               isMouseDownInside,
               isListening,
               hasMouseDownHappened,
+              isClickedOnExcluded,
               hotkeyScope,
               enabled,
               event,