Use data attributes for click outside instead of classNames (#12228)

We previously used classnames to exclude elements from the click outside
listener.

With this PR we can now use `data-click-outside-id` instead of
`classNames` to target the elements we want to exclude from the click
outside listener.

We can also add `data-globally-prevent-click-outside` to a component to
globally prevent triggering click outside listeners for other
components. This attribute is especially useful for confirmation modals
and snackbar items.

Fixes #11785:


https://github.com/user-attachments/assets/318baa7e-0f82-4e3a-a447-bf981328462d

packages/twenty-front/.storybook/preview.tsx

@@ -7,10 +7,10 @@ import { useDarkMode } from 'storybook-dark-mode';
 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
 
+import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import 'react-loading-skeleton/dist/skeleton.css';
 import 'twenty-ui/style.css';
 import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme';
-import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 
 initialize({
   onUnhandledRequest: async (request: Request) => {
@@ -48,7 +48,7 @@ const preview: Preview = {
         <ThemeProvider theme={theme}>
           <ThemeContextProvider theme={theme}>
             <ClickOutsideListenerContext.Provider
-              value={{ excludeClassName: undefined }}
+              value={{ excludedClickOutsideId: undefined }}
             >
               <Story />
             </ClickOutsideListenerContext.Provider>

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx

@@ -1,6 +1,7 @@
 import { ActionComponent } from '@/action-menu/actions/display/components/ActionComponent';
 import { ActionScope } from '@/action-menu/actions/types/ActionScope';
 import { ActionType } from '@/action-menu/actions/types/ActionType';
+import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
@@ -81,7 +82,9 @@ export const RecordIndexActionMenuDropdown = () => {
         y: actionMenuDropdownPosition.y ?? 0,
       }}
       dropdownComponents={
-        <StyledDropdownMenuContainer className="action-menu-dropdown">
+        <StyledDropdownMenuContainer
+          data-click-outside-id={ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
+        >
           <DropdownMenuItemsContainer>
             <SelectableList
               hotkeyScope={ActionMenuDropdownHotkeyScope.ActionMenuDropdown}

packages/twenty-front/src/modules/action-menu/constants/ActionMenuDropdownClickOutsideId.ts

@@ -0,0 +1 @@
+export const ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID = 'action-menu-dropdown';

packages/twenty-front/src/modules/app/components/App.tsx

@@ -30,7 +30,7 @@ export const App = () => {
               <ExceptionHandlerProvider>
                 <HelmetProvider>
                   <ClickOutsideListenerContext.Provider
-                    value={{ excludeClassName: undefined }}
+                    value={{ excludedClickOutsideId: undefined }}
                   >
                     <AppRouter />
                   </ClickOutsideListenerContext.Provider>

packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx

@@ -15,6 +15,7 @@ import { useExecuteTasksOnAnyLocationChange } from '@/app/hooks/useExecuteTasksO
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
 import { isCaptchaRequiredForPath } from '@/captcha/utils/isCaptchaRequiredForPath';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
@@ -89,6 +90,12 @@ export const PageChangeEffect = () => {
   const { executeTasksOnAnyLocationChange } =
     useExecuteTasksOnAnyLocationChange();
 
+  const { closeCommandMenu } = useCommandMenu();
+
+  useEffect(() => {
+    closeCommandMenu();
+  }, [location.pathname, closeCommandMenu]);
+
   useEffect(() => {
     if (!previousLocation || previousLocation !== location.pathname) {
       setPreviousLocation(location.pathname);

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

@@ -1,8 +1,10 @@
 import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
+import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
 import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
 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';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useTheme } from '@emotion/react';
@@ -62,14 +64,14 @@ export const CommandMenuOpenContainer = ({
     refs: [commandMenuRef],
     callback: handleClickOutside,
     listenerId: 'COMMAND_MENU_LISTENER_ID',
-    excludeClassNames: ['page-header-command-menu-button'],
+    excludedClickOutsideIds: [PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID],
   });
 
   return (
     <StyledCommandMenu
       data-testid="command-menu"
+      data-click-outside-id={COMMAND_MENU_CLICK_OUTSIDE_ID}
       ref={commandMenuRef}
-      className="command-menu"
       animate={targetVariantForAnimation}
       initial="closed"
       exit="closed"

packages/twenty-front/src/modules/command-menu/constants/CommandMenuClickOutsideId.ts

@@ -0,0 +1 @@
+export const COMMAND_MENU_CLICK_OUTSIDE_ID = 'command-menu';

packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx

@@ -3,7 +3,9 @@ import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atla
 import { useContext, useRef } from 'react';
 import { useRecoilCallback } from 'recoil';
 
+import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
 import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
+import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
 import { RecordBoardHeader } from '@/object-record/record-board/components/RecordBoardHeader';
 import { RecordBoardScrollToFocusedCardEffect } from '@/object-record/record-board/components/RecordBoardScrollToFocusedCardEffect';
 import { RecordBoardStickyHeaderEffect } from '@/object-record/record-board/components/RecordBoardStickyHeaderEffect';
@@ -13,6 +15,7 @@ import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/use
 import { useFocusedRecordBoardCard } from '@/object-record/record-board/hooks/useFocusedRecordBoardCard';
 import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection';
 import { RecordBoardDeactivateBoardCardEffect } from '@/object-record/record-board/record-board-card/components/RecordBoardDeactivateBoardCardEffect';
+import { RECORD_BOARD_CARD_CLICK_OUTSIDE_ID } from '@/object-record/record-board/record-board-card/constants/RecordBoardCardClickOutsideId';
 import { RecordBoardColumn } from '@/object-record/record-board/record-board-column/components/RecordBoardColumn';
 import { RecordBoardScope } from '@/object-record/record-board/scopes/RecordBoardScope';
 import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext';
@@ -24,7 +27,9 @@ import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record
 import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
+import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
+import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@@ -104,13 +109,12 @@ export const RecordBoard = () => {
   );
 
   useListenClickOutside({
-    excludeClassNames: [
+    excludedClickOutsideIds: [
-      'bottom-bar',
+      ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
-      'action-menu-dropdown',
+      COMMAND_MENU_CLICK_OUTSIDE_ID,
-      'command-menu',
+      MODAL_BACKDROP_CLICK_OUTSIDE_ID,
-      'modal-backdrop',
+      PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID,
-      'page-action-container',
+      RECORD_BOARD_CARD_CLICK_OUTSIDE_ID,
-      'record-board-card',
     ],
     listenerId: RECORD_BOARD_CLICK_OUTSIDE_LISTENER_ID,
     refs: [],

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -13,6 +13,7 @@ import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDro
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
 import { RecordBoardCardBody } from '@/object-record/record-board/record-board-card/components/RecordBoardCardBody';
 import { RecordBoardCardHeader } from '@/object-record/record-board/record-board-card/components/RecordBoardCardHeader';
+import { RECORD_BOARD_CARD_CLICK_OUTSIDE_ID } from '@/object-record/record-board/record-board-card/constants/RecordBoardCardClickOutsideId';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
 import { AppPath } from '@/types/AppPath';
@@ -197,7 +198,7 @@ export const RecordBoardCard = () => {
 
   return (
     <StyledBoardCardWrapper
-      className="record-board-card"
+      data-click-outside-id={RECORD_BOARD_CARD_CLICK_OUTSIDE_ID}
       onContextMenu={handleActionMenuDropdown}
     >
       <InView>

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardDraggableContainer.tsx

@@ -50,7 +50,6 @@ export const RecordBoardCardDraggableContainer = ({
             {...draggableProvided?.dragHandleProps}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...draggableProvided?.draggableProps}
-            className="record-board-card"
             data-selectable-id={recordId}
             data-select-disable
           >

packages/twenty-front/src/modules/object-record/record-board/record-board-card/constants/RecordBoardCardClickOutsideId.ts

@@ -0,0 +1 @@
+export const RECORD_BOARD_CARD_CLICK_OUTSIDE_ID = 'record-board-card';

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx

@@ -1,8 +1,12 @@
+import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
+import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
 import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
 import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
+import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
+import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@@ -23,12 +27,11 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
   const setHotkeyScope = useSetHotkeyScope();
 
   useListenClickOutside({
-    excludeClassNames: [
+    excludedClickOutsideIds: [
-      'bottom-bar',
+      ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
-      'action-menu-dropdown',
+      COMMAND_MENU_CLICK_OUTSIDE_ID,
-      'command-menu',
+      PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID,
-      'modal-backdrop',
+      MODAL_BACKDROP_CLICK_OUTSIDE_ID,
-      'page-action-container',
     ],
     listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
     refs: [tableBodyRef],

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx

@@ -4,6 +4,7 @@ import { Key } from 'ts-key-enum';
 
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
+import { DIALOG_CLICK_OUTSIDE_ID } from '@/ui/feedback/dialog-manager/constants/DialogClickOutsideId';
 import { DIALOG_LISTENER_ID } from '@/ui/feedback/dialog-manager/constants/DialogListenerId';
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@@ -138,6 +139,7 @@ export const Dialog = ({
       animate="open"
       exit="closed"
       className={className}
+      data-click-outside-id={DIALOG_CLICK_OUTSIDE_ID}
     >
       <StyledDialogContainer
         variants={containerVariants}

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/DialogManager.tsx

@@ -15,7 +15,6 @@ export const DialogManager = ({ children }: React.PropsWithChildren) => {
       {dialogInternal.queue.map(({ buttons, children, id, message, title }) => (
         <Dialog
           key={id}
-          className="dialog-manager-dialog"
           {...{ title, message, buttons, id, children }}
           onClose={() => closeDialog(id)}
         />

packages/twenty-front/src/modules/ui/feedback/dialog-manager/constants/DialogClickOutsideId.ts

@@ -0,0 +1 @@
+export const DIALOG_CLICK_OUTSIDE_ID = 'dialog-manager-dialog';

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -203,6 +203,7 @@ export const SnackBar = ({
       onMouseLeave={handleMouseLeave}
       title={message || defaultAriaLabelByVariant[variant]}
       {...{ className, id, role, variant }}
+      data-globally-prevent-click-outside
     >
       <StyledProgressBar
         barColor={theme.snackBar[variant].backgroundColor}

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx

@@ -79,7 +79,6 @@ export const DropdownContent = ({
   useListenClickOutside({
     refs: [floatingUiRefs.floating, floatingUiRefs.domReference],
     listenerId: dropdownId,
-    excludeClassNames: ['confirmation-modal'],
     callback: (event) => {
       if (activeDropdownFocusId !== dropdownId) return;
 
@@ -118,7 +117,7 @@ export const DropdownContent = ({
     maxWidth: dropdownMaxWidth,
   };
 
-  const { excludeClassName } = useContext(ClickOutsideListenerContext);
+  const { excludedClickOutsideId } = useContext(ClickOutsideListenerContext);
 
   return (
     <>
@@ -127,24 +126,23 @@ export const DropdownContent = ({
       )}
 
       <FloatingPortal>
-        <div className={excludeClassName}>
+        <StyledDropdownContentContainer
-          <StyledDropdownContentContainer
+          ref={floatingUiRefs.setFloating}
-            ref={floatingUiRefs.setFloating}
+          style={dropdownMenuStyles}
-            style={dropdownMenuStyles}
+          role="listbox"
-            role="listbox"
+          id={`${dropdownId}-options`}
-            id={`${dropdownId}-options`}
+          data-click-outside-id={excludedClickOutsideId}
-          >
+        >
-            <OverlayContainer>
+          <OverlayContainer>
-              <DropdownMenu
+            <DropdownMenu
-                id={dropdownId}
+              id={dropdownId}
-                width={dropdownWidth}
+              width={dropdownWidth}
-                data-select-disable
+              data-select-disable
-              >
+            >
-                {dropdownComponents}
+              {dropdownComponents}
-              </DropdownMenu>
+            </DropdownMenu>
-            </OverlayContainer>
+          </OverlayContainer>
-          </StyledDropdownContentContainer>
+        </StyledDropdownContentContainer>
-        </div>
       </FloatingPortal>
     </>
   );

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -119,7 +119,7 @@ export const ConfirmationModal = ({
           isClosable={true}
           padding="large"
           modalVariant={modalVariant}
-          className="confirmation-modal"
+          data-globally-prevent-click-outside
         >
           <StyledCenteredTitle>
             <H1Title title={title} fontColor={H1TitleFontColor.Primary} />

packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx

@@ -4,7 +4,8 @@ import { ModalHotkeyScope } from '@/ui/layout/modal/components/types/ModalHotkey
 import { ModalComponentInstanceContext } from '@/ui/layout/modal/contexts/ModalComponentInstanceContext';
 import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
 
-import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName';
+import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
+import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@@ -229,8 +230,7 @@ export const Modal = ({
         >
           <ClickOutsideListenerContext.Provider
             value={{
-              excludeClassName:
+              excludedClickOutsideId: MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID,
-                MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME,
             }}
           >
             <ModalHotkeysAndClickOutsideEffect
@@ -242,7 +242,7 @@ export const Modal = ({
             />
             <StyledBackDrop
               data-testid="modal-backdrop"
-              className="modal-backdrop"
+              data-click-outside-id={MODAL_BACKDROP_CLICK_OUTSIDE_ID}
               onMouseDown={stopEventPropagation}
               modalVariant={modalVariant}
             >

packages/twenty-front/src/modules/ui/layout/modal/components/ModalHotkeysAndClickOutsideEffect.tsx

@@ -1,5 +1,6 @@
+import { DIALOG_CLICK_OUTSIDE_ID } from '@/ui/feedback/dialog-manager/constants/DialogClickOutsideId';
 import { ModalHotkeyScope } from '@/ui/layout/modal/components/types/ModalHotkeyScope';
-import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName';
+import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { Key } from 'ts-key-enum';
@@ -45,9 +46,9 @@ export const ModalHotkeysAndClickOutsideEffect = ({
 
   useListenClickOutside({
     refs: [modalRef],
-    excludeClassNames: [
+    excludedClickOutsideIds: [
-      MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME,
+      MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID,
-      'dialog-manager-dialog',
+      DIALOG_CLICK_OUTSIDE_ID,
     ],
     listenerId: `MODAL_CLICK_OUTSIDE_LISTENER_ID_${modalId}`,
     callback: () => {

packages/twenty-front/src/modules/ui/layout/modal/constants/ModalBackdropClickOutsideId.ts

@@ -0,0 +1 @@
+export const MODAL_BACKDROP_CLICK_OUTSIDE_ID = 'modal-backdrop';

packages/twenty-front/src/modules/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName.ts

@@ -1,2 +1,2 @@
-export const MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME =
+export const MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID =
   'modal-click-outside-listener-excluded';

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx

@@ -1,6 +1,7 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
+import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { i18n } from '@lingui/core';
@@ -124,7 +125,9 @@ export const PageHeaderToggleCommandMenuButton = () => {
           animatedSvg={
             <AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
           }
-          className="page-header-command-menu-button"
+          data-click-outside-id={
+            PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID
+          }
           dataTestId="page-header-command-menu-button"
           size={isMobile ? 'medium' : 'small'}
           variant="secondary"

packages/twenty-front/src/modules/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId.ts

@@ -0,0 +1,2 @@
+export const PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID =
+  'page-header-command-menu-button';

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil';
 
 import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
 
+import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import {
@@ -144,7 +145,9 @@ export const PageHeader = ({
         </StyledTopBarIconStyledTitleContainer>
       </StyledLeftContainer>
 
-      <StyledPageActionContainer className="page-action-container">
+      <StyledPageActionContainer
+        data-click-outside-id={PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID}
+      >
         {children}
       </StyledPageActionContainer>
     </StyledTopBarContainer>

packages/twenty-front/src/modules/ui/layout/page/constants/PageActionContainerClickOutsideId.ts

@@ -0,0 +1 @@
+export const PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID = 'page-action-container';

packages/twenty-front/src/modules/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext.tsx

@@ -1,10 +1,10 @@
 import { createContext } from 'react';
 
 type ClickOutsideListenerContextType = {
-  excludeClassName: string | undefined;
+  excludedClickOutsideId: string | undefined;
 };
 
 export const ClickOutsideListenerContext =
   createContext<ClickOutsideListenerContextType>({
-    excludeClassName: undefined,
+    excludedClickOutsideId: undefined,
   });

packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts

@@ -4,12 +4,13 @@ import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilit
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import React, { useEffect } from 'react';
 import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
 
 const CLICK_OUTSIDE_DEBUG_MODE = false;
 
 export type ClickOutsideListenerProps<T extends Element> = {
   refs: Array<React.RefObject<T>>;
-  excludeClassNames?: string[];
+  excludedClickOutsideIds?: string[];
   callback: (event: MouseEvent | TouchEvent) => void;
   listenerId: string;
   enabled?: boolean;
@@ -17,7 +18,7 @@ export type ClickOutsideListenerProps<T extends Element> = {
 
 export const useListenClickOutside = <T extends Element>({
   refs,
-  excludeClassNames,
+  excludedClickOutsideIds,
   callback,
   listenerId,
   enabled = true,
@@ -90,12 +91,18 @@ export const useListenClickOutside = <T extends Element>({
         let currentElement: HTMLElement | null = clickedElement;
 
         while (currentElement) {
-          const currentClassList = currentElement.classList;
+          const currentDataAttributes = currentElement.dataset;
+
+          const isGloballyExcluded =
+            currentDataAttributes?.globallyPreventClickOutside === 'true';
+
+          const clickOutsideId = currentDataAttributes?.clickOutsideId;
 
           isClickedOnExcluded =
-            excludeClassNames?.some((className) =>
+            isGloballyExcluded ||
-              currentClassList.contains(className),
+            (isDefined(clickOutsideId) &&
-            ) ?? false;
+              isDefined(excludedClickOutsideIds) &&
+              excludedClickOutsideIds.includes(clickOutsideId));
 
           if (isClickedOnExcluded) {
             break;
@@ -140,7 +147,7 @@ export const useListenClickOutside = <T extends Element>({
       clickOutsideListenerIsMouseDownInsideState,
       clickOutsideListenerMouseDownHappenedState,
       refs,
-      excludeClassNames,
+      excludedClickOutsideIds,
       callback,
       listenerId,
     ],