overlay: stop propagation on escape keydown event

This adds a call to e.stopPropagation() to prevent nested overlays from closing on a single key press. Fixes: #5099
palantir · Jun 3, 2022 · 83778a0 · 83778a0
1 parent 268ab68
commit 83778a0
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 17 deletions.
diff --git a/packages/core/src/components/overlay/overlay.tsx b/packages/core/src/components/overlay/overlay.tsx
@@ -659,6 +659,8 @@ export class Overlay extends AbstractPureComponent2<OverlayProps, IOverlayState>
         const { canEscapeKeyClose, onClose } = this.props;
         if (e.key === "Escape" && canEscapeKeyClose) {
             onClose?.(e);
+            // prevent other overlays from closing
+            e.stopPropagation();
             // prevent browser-specific escape key behavior (Safari exits fullscreen)
             e.preventDefault();
         }

diff --git a/packages/core/test/alert/alertTests.tsx b/packages/core/test/alert/alertTests.tsx
@@ -19,7 +19,7 @@ import { mount, shallow, ShallowWrapper } from "enzyme";
 import * as React from "react";
 import { SinonStub, spy, stub } from "sinon";
 
-import { Alert, Button, Classes, IAlertProps, IButtonProps, Icon, Intent, Keys } from "../../src";
+import { Alert, Button, Classes, IAlertProps, IButtonProps, Icon, Intent } from "../../src";
 import * as Errors from "../../src/common/errors";
 import { findInPortal } from "../utils";
 
@@ -175,11 +175,11 @@ describe("<Alert>", () => {
             );
             const overlay = findInPortal(alert, "." + Classes.OVERLAY).first();
 
-            overlay.simulate("keydown", { which: Keys.ESCAPE });
+            overlay.simulate("keydown", { key: "Escape" });
             assert.isTrue(onCancel.notCalled);
 
             alert.setProps({ canEscapeKeyCancel: true });
-            overlay.simulate("keydown", { which: Keys.ESCAPE });
+            overlay.simulate("keydown", { key: "Escape" });
             assert.isTrue(onCancel.calledOnce);
 
             alert.unmount();

diff --git a/packages/core/test/dialog/dialogTests.tsx b/packages/core/test/dialog/dialogTests.tsx
@@ -20,7 +20,6 @@ import * as React from "react";
 import { spy } from "sinon";
 
 import { Button, Classes, Dialog, DialogProps, H4, Icon, IconSize } from "../../src";
-import * as Keys from "../../src/common/keys";
 
 describe("<Dialog>", () => {
     it("renders its content correctly", () => {
@@ -93,7 +92,7 @@ describe("<Dialog>", () => {
                 {createDialogContents()}
             </Dialog>,
         );
-        dialog.simulate("keydown", { which: Keys.ESCAPE });
+        dialog.simulate("keydown", { key: "Escape" });
         assert.isTrue(onClose.notCalled);
     });
 

diff --git a/packages/core/test/drawer/drawerTests.tsx b/packages/core/test/drawer/drawerTests.tsx
@@ -20,7 +20,6 @@ import * as React from "react";
 import { spy } from "sinon";
 
 import { Button, Classes, Drawer, DrawerProps, Position } from "../../src";
-import * as Keys from "../../src/common/keys";
 
 describe("<Drawer>", () => {
     let drawer: ReactWrapper<DrawerProps, any>;
@@ -197,7 +196,7 @@ describe("<Drawer>", () => {
                 {createDrawerContents()}
             </Drawer>,
         );
-        drawer.simulate("keydown", { which: Keys.ESCAPE });
+        drawer.simulate("keydown", { key: "Escape" });
         assert.isTrue(onClose.notCalled);
     });
 

diff --git a/packages/core/test/overlay/overlayTests.tsx b/packages/core/test/overlay/overlayTests.tsx
@@ -22,7 +22,6 @@ import { spy } from "sinon";
 import { dispatchMouseEvent } from "@blueprintjs/test-commons";
 
 import { Classes, Overlay, OverlayProps, Portal, Utils } from "../../src";
-import * as Keys from "../../src/common/keys";
 import { findInPortal } from "../utils";
 
 const BACKDROP_SELECTOR = `.${Classes.OVERLAY_BACKDROP}`;
@@ -224,7 +223,7 @@ describe("<Overlay>", () => {
                     {createOverlayContents()}
                 </Overlay>,
             );
-            wrapper.simulate("keydown", { which: Keys.ESCAPE });
+            wrapper.simulate("keydown", { key: "Escape" });
             assert.isTrue(onClose.calledOnce);
         });
 
@@ -235,7 +234,7 @@ describe("<Overlay>", () => {
                     {createOverlayContents()}
                 </Overlay>,
             );
-            overlay.simulate("keydown", { which: Keys.ESCAPE });
+            overlay.simulate("keydown", { key: "Escape" });
             assert.isTrue(onClose.notCalled);
             overlay.unmount();
         });

diff --git a/packages/core/test/popover/popoverTests.tsx b/packages/core/test/popover/popoverTests.tsx
@@ -24,7 +24,6 @@ import { dispatchMouseEvent } from "@blueprintjs/test-commons";
 import { Portal } from "../../src";
 import * as Classes from "../../src/common/classes";
 import * as Errors from "../../src/common/errors";
-import * as Keys from "../../src/common/keys";
 import { Overlay } from "../../src/components/overlay/overlay";
 import { IPopoverProps, IPopoverState, Popover, PopoverInteractionKind } from "../../src/components/popover/popover";
 import { PopoverArrow } from "../../src/components/popover/popoverArrow";
@@ -833,8 +832,8 @@ describe("<Popover>", () => {
         };
         wrapper.sendEscapeKey = () => {
             wrapper!.findClass(Classes.OVERLAY_OPEN).simulate("keydown", {
+                key: "Escape",
                 nativeEvent: new KeyboardEvent("keydown"),
-                which: Keys.ESCAPE,
             });
             return wrapper!;
         };

diff --git a/packages/datetime/test/dateInputTests.tsx b/packages/datetime/test/dateInputTests.tsx
@@ -87,7 +87,7 @@ describe("<DateInput>", () => {
         wrapper.setState({ isOpen: true });
         /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(wrapper.find(Popover).prop("isOpen"));
-        wrapper.find("input").simulate("keydown", { which: Keys.ESCAPE });
+        wrapper.find("input").simulate("keydown", { key: "Escape" });
         /* eslint-disable-next-line deprecation/deprecation */
         assert.isFalse(wrapper.find(Popover).prop("isOpen"));
     });

diff --git a/packages/popover2/test/contextMenu2Tests.tsx b/packages/popover2/test/contextMenu2Tests.tsx
@@ -20,7 +20,7 @@ import { mount, ReactWrapper } from "enzyme";
 import * as React from "react";
 import { spy } from "sinon";
 
-import { Classes as CoreClasses, Keys, Menu, MenuItem } from "@blueprintjs/core";
+import { Classes as CoreClasses, Menu, MenuItem } from "@blueprintjs/core";
 
 import {
     Classes,
@@ -80,8 +80,8 @@ describe("ContextMenu2", () => {
                 .find(`.${CoreClasses.OVERLAY_OPEN}`)
                 .hostNodes()
                 .simulate("keydown", {
+                    key: "Escape",
                     nativeEvent: new KeyboardEvent("keydown"),
-                    which: Keys.ESCAPE,
                 });
             assert.isFalse(ctxMenu.find(Popover2).prop("isOpen"));
         });

diff --git a/packages/popover2/test/popover2Tests.tsx b/packages/popover2/test/popover2Tests.tsx
@@ -19,7 +19,7 @@ import { mount, ReactWrapper, shallow } from "enzyme";
 import * as React from "react";
 import * as sinon from "sinon";
 
-import { Classes as CoreClasses, Keys, Menu, MenuItem, Overlay, Portal } from "@blueprintjs/core";
+import { Classes as CoreClasses, Menu, MenuItem, Overlay, Portal } from "@blueprintjs/core";
 import { dispatchMouseEvent } from "@blueprintjs/test-commons";
 
 import { Classes, Errors } from "../src";
@@ -832,8 +832,8 @@ describe("<Popover2>", () => {
         };
         wrapper.sendEscapeKey = () => {
             wrapper!.findClass(CoreClasses.OVERLAY_OPEN).simulate("keydown", {
+                key: "Escape",
                 nativeEvent: new KeyboardEvent("keydown"),
-                which: Keys.ESCAPE,
             });
             return wrapper!;
         };