[Overlay] Support nested overlays (#2033)

palantir · Jan 30, 2018 · ff76c4a · ff76c4a · blueprint-bot · Jan 30, 2018
1 parent 8f05618
commit ff76c4a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/packages/core/src/components/overlay/overlay.tsx b/packages/core/src/components/overlay/overlay.tsx
@@ -138,7 +138,7 @@ export class Overlay extends React.PureComponent<IOverlayProps, IOverlayState> {
     private static getLastOpened = () => Overlay.openStack[Overlay.openStack.length - 1];
 
     // an HTMLElement that contains the backdrop and any children, to query for focus target
-    private containerElement: HTMLElement;
+    public containerElement: HTMLElement;
     private refHandlers = {
         container: (ref: HTMLDivElement) => (this.containerElement = ref),
     };
@@ -349,10 +349,17 @@ export class Overlay extends React.PureComponent<IOverlayProps, IOverlayState> {
     };
 
     private handleDocumentClick = (e: MouseEvent) => {
-        const { isOpen, onClose } = this.props;
+        const { canOutsideClickClose, isOpen, onClose } = this.props;
         const eventTarget = e.target as HTMLElement;
-        const isClickInOverlay = this.containerElement != null && this.containerElement.contains(eventTarget);
-        if (isOpen && this.props.canOutsideClickClose && !isClickInOverlay) {
+
+        const { openStack } = Overlay;
+        const stackIndex = openStack.indexOf(this);
+
+        const isClickInThisOverlayOrDescendant = openStack
+            .slice(stackIndex)
+            .some(({ containerElement }) => containerElement && containerElement.contains(eventTarget));
+
+        if (isOpen && canOutsideClickClose && !isClickInThisOverlayOrDescendant) {
             // casting to any because this is a native event
             safeInvoke(onClose, e as any);
         }

diff --git a/packages/core/test/overlay/overlayTests.tsx b/packages/core/test/overlay/overlayTests.tsx
@@ -139,6 +139,23 @@ describe("<Overlay>", () => {
             assert.isTrue(onClose.notCalled);
         });
 
+        it("not invoked on click of a nested overlay", () => {
+            const onClose = spy();
+            mount(
+                <Overlay isOpen={true} onClose={onClose}>
+                    <div>
+                        {createOverlayContents()}
+                        <Overlay isOpen={true}>
+                            <div id="inner-element">{createOverlayContents()}</div>
+                        </Overlay>
+                    </div>
+                </Overlay>,
+            )
+                .find("#inner-element")
+                .simulate("mousedown");
+            assert.isTrue(onClose.notCalled);
+        });
+
         it("invoked on escape key", () => {
             const onClose = spy();
             mount(