[core] feat(Overlay, Portal): allow portal to stop event propagation

packages/core/src/components/overlay/overlay.tsx

@@ -109,6 +109,15 @@ export interface IOverlayableProps extends IOverlayLifecycleProps {
      */
     portalContainer?: HTMLElement;
 
+    /**
+     * A list of DOM events which should be stopped from propagating through the Portal.
+     * This prop is ignored if `usePortal` is `false`.
+     *
+     * @see https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
+     * @see https://github.com/palantir/blueprint/issues/6124
+     */
+    portalStopPropagationEvents?: Array<keyof HTMLElementEventMap>;
+
     /**
      * A callback that is invoked when user interaction causes the overlay to close, such as
      * clicking on the overlay or pressing the `esc` key (if enabled).
@@ -318,7 +327,11 @@ export class Overlay extends AbstractPureComponent2<OverlayProps, IOverlayState>
         );
         if (usePortal) {
             return (
-                <Portal className={this.props.portalClassName} container={this.props.portalContainer}>
+                <Portal
+                    className={this.props.portalClassName}
+                    container={this.props.portalContainer}
+                    stopPropagationEvents={this.props.portalStopPropagationEvents}
+                >
                     {transitionGroup}
                 </Portal>
             );

packages/core/src/components/portal/portal.tsx

@@ -40,6 +40,14 @@ export interface IPortalProps extends Props {
      * @default document.body
      */
     container?: HTMLElement;
+
+    /**
+     * A list of DOM events which should be stopped from propagating through this portal element.
+     *
+     * @see https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
+     * @see https://github.com/palantir/blueprint/issues/6124
+     */
+    stopPropagationEvents?: Array<keyof HTMLElementEventMap>;
 }
 
 export interface IPortalState {
@@ -103,6 +111,7 @@ export class Portal extends React.Component<PortalProps, IPortalState> {
         }
         this.portalElement = this.createContainerElement();
         this.props.container.appendChild(this.portalElement);
+        this.addStopPropagationListeners(this.props.stopPropagationEvents);
         /* eslint-disable-next-line react/no-did-mount-set-state */
         this.setState({ hasMounted: true }, this.props.onChildrenMount);
     }
@@ -113,9 +122,15 @@ export class Portal extends React.Component<PortalProps, IPortalState> {
             maybeRemoveClass(this.portalElement.classList, prevProps.className);
             maybeAddClass(this.portalElement.classList, this.props.className);
         }
+
+        if (this.portalElement != null && prevProps.stopPropagationEvents !== this.props.stopPropagationEvents) {
+            this.removeStopPropagationListeners(prevProps.stopPropagationEvents);
+            this.addStopPropagationListeners(this.props.stopPropagationEvents);
+        }
     }
 
     public componentWillUnmount() {
+        this.removeStopPropagationListeners(this.props.stopPropagationEvents);
         this.portalElement?.remove();
     }
 
@@ -128,6 +143,14 @@ export class Portal extends React.Component<PortalProps, IPortalState> {
         }
         return container;
     }
+
+    private addStopPropagationListeners(eventNames?: Array<keyof HTMLElementEventMap>) {
+        eventNames?.forEach(event => this.portalElement?.addEventListener(event, handleStopProgation));
+    }
+
+    private removeStopPropagationListeners(events?: Array<keyof HTMLElementEventMap>) {
+        events?.forEach(event => this.portalElement?.removeEventListener(event, handleStopProgation));
+    }
 }
 
 function maybeRemoveClass(classList: DOMTokenList, className?: string) {
@@ -141,3 +164,7 @@ function maybeAddClass(classList: DOMTokenList, className?: string) {
         classList.add(...className.split(" "));
     }
 }
+
+function handleStopProgation(e: Event) {
+    e.stopPropagation();
+}