replace Dialog's broken canOutsideClickClose with pointer-events

palantir · Aug 2, 2018 · 0d7af52 · 0d7af52 · blueprint-bot · Aug 2, 2018
1 parent f3a45fb
commit 0d7af52
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 17 deletions.
diff --git a/packages/core/src/components/dialog/_dialog.scss b/packages/core/src/components/dialog/_dialog.scss
@@ -57,14 +57,8 @@ $dialog-padding: $pt-grid-size * 2 !default;
   justify-content: center;
   width: 100%;
   min-height: 100%;
+  pointer-events: none;
   user-select: none;
-
-  // LEGACY: override old (<= 1.24.0) dialog styles when inside a container to respect flex layout
-  .#{$ns}-dialog {
-    // stylelint-disable-next-line declaration-no-important
-    position: static !important;
-    transform: none;
-  }
 }
 
 .#{$ns}-dialog {
@@ -76,6 +70,7 @@ $dialog-padding: $pt-grid-size * 2 !default;
   background: $light-gray4;
   width: $pt-grid-size * 50;
   padding-bottom: $pt-grid-size * 2;
+  pointer-events: all;
   user-select: text;
 
   &:focus {

diff --git a/packages/core/src/components/dialog/dialog.tsx b/packages/core/src/components/dialog/dialog.tsx
@@ -11,7 +11,6 @@ import { AbstractPureComponent } from "../../common/abstractPureComponent";
 import * as Classes from "../../common/classes";
 import * as Errors from "../../common/errors";
 import { DISPLAYNAME_PREFIX, IProps } from "../../common/props";
-import { safeInvoke } from "../../common/utils";
 import { H4 } from "../html/html";
 import { Icon, IconName } from "../icon/icon";
 import { IBackdropProps, IOverlayableProps, Overlay } from "../overlay/overlay";
@@ -73,7 +72,7 @@ export class Dialog extends AbstractPureComponent<IDialogProps, {}> {
     public render() {
         return (
             <Overlay {...this.props} className={Classes.OVERLAY_SCROLL_CONTAINER} hasBackdrop={true}>
-                <div className={Classes.DIALOG_CONTAINER} onMouseDown={this.handleContainerMouseDown}>
+                <div className={Classes.DIALOG_CONTAINER}>
                     <div className={classNames(Classes.DIALOG, this.props.className)} style={this.props.style}>
                         {this.maybeRenderHeader()}
                         {this.props.children}
@@ -121,12 +120,4 @@ export class Dialog extends AbstractPureComponent<IDialogProps, {}> {
             </div>
         );
     }
-
-    private handleContainerMouseDown = (evt: React.MouseEvent<HTMLDivElement>) => {
-        // quick re-implementation of canOutsideClickClose because DIALOG_CONTAINER covers the backdrop
-        const isClickOutsideDialog = (evt.target as HTMLElement).closest(`.${Classes.DIALOG}`) == null;
-        if (isClickOutsideDialog && this.props.canOutsideClickClose) {
-            safeInvoke(this.props.onClose, evt);
-        }
-    };
 }