Add 'nopan' and 'nodrag' classes to Modal's overlay classes in order to always prevent react-flow to react to drag and pan actions in modals

Author: andreas-schultz

CHANGELOG.md

@@ -23,6 +23,8 @@ This is a major release, and it might be not compatible with your current usage
     -    First auto-completion item not marked as active when drop down first shown.
 -   `<CodeEditor />`:
     -    Enter key handling (adding new line) broken when `onKeyDown` is defined.
+-   `<Modal />`:
+    -    Add 'nopan' and 'nodrag' classes to Modal's overlay classes in order to always prevent react-flow to react to drag and pan actions in modals.
 
 
 ## [24.3.0] - 2025-06-05

src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -233,3 +233,6 @@ export const ReactFlowExtended = React.forwardRef(ReactFlowExtendedPlain) as <T
  * @deprecated (v26) use `ReactFlowExtended`
  */
 export const ReactFlow = ReactFlowExtended;
+
+/** Classes that when set for an element, prevent that they trigger react-flow dragging and panning actions. */
+export const preventReactFlowActionsClasses = "nodrag nopan"

src/components/Dialog/Modal.tsx

@@ -10,6 +10,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
+import {preventReactFlowActionsClasses} from "../../cmem";
 
 export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     children: React.ReactNode | React.ReactNode[];
@@ -114,7 +115,7 @@ export const Modal = ({
         <BlueprintOverlay
             {...otherProps}
             backdropProps={backdropProps}
-            className={overlayClassName}
+            className={`${overlayClassName} ${preventReactFlowActionsClasses}`}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}

src/components/Dialog/SimpleDialog.tsx

@@ -136,7 +136,8 @@ export const modalPreventEvents = {
     onDrag: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onDragStart: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onDragEnd: (event: BaseSyntheticEvent) => event.stopPropagation(),
-    onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    // The following prevents some drop-downs to not close anymore when clicking outside of them
+    // onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onMouseUp: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onClick: (event: BaseSyntheticEvent) => event.stopPropagation(),
 };